Installation

Using Squeeze with your application is easy!

Setup GitHub Packages authentication

Curology uses GitHub Packages for its internal npm registry. To use Squeeze in your application, you need to both authenticate with GitHub and tell your app to use an alternate registry for packages prefixed with @curology.

To authenticate, create or modify the .npmrc in your home directory (~/.npmrc) to include a GitHub Personal Access Token. Use a classic Access Token token, with all scopes selected. After copying the token, be sure to authorize it for access to Curology by selecting Configure SSO for the created token on GitHub.

//npm.pkg.github.com/:_authToken=${TOKEN}

Next, create an .npmrc at the root of your project and add the @curology scoped registry:

@curology:registry=https://npm.pkg.github.com

Install the necessary packages

Once you're authenticated and your application is pointing to GitHub Packages, you can install the three packages you need to use Squeeze:

pnpm i @curology/ui-components-web @curology/ui-styles-web @curology/ui-tokens

Configure your build

Squeeze's components are styled using Tailwind CSS's utility classes, so those classes need to be included during the build of your application. It's best to build your app using Tailwind as well so you can leverage Squeeze's robust design tokens, but we also support simply including the built component CSS.

Apps using Tailwind

First, setup your Tailwind config to extend @curology/ui-styles-web. This will consume the design tokens and customize all of Tailwind's classes to match Squeeze. You will need to include the built JS files from the ui-components-web directory so that Tailwind can scan for which classes are used to add them to the final CSS output.

tailwind.config.cjs

const config = require('@curology/ui-styles-web/tailwind.config.cjs').default;

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...config,
  content: ['./node_modules/@curology/ui-components-web/dist/**/*.js'],
};

Next, import @curology/ui-styles-web in your application, which includes global styles, Tailwind's utility classes, and imports the appropriate fonts.You can do this either in JS or CSS.

your-app.ts

import '@curology/ui-styles-web';

your-app.css

@import '@curology/ui-styles-web';

Finally, set the theme of your application.

Apps without Tailwind

If you aren't using Tailwind, you can import the built component CSS directly.

your-app.ts

import '@curology/ui-tokens/curology';
import '@curology/ui-components-web/react/index.css';