Skip to main content

Installation

Install Squeeze's React components and custom Tailwind CSS utility classes.

Setup GitHub Packages authentication​

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

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

Create or modify the .npmrc in your home directory (~/.npmrc) to include a GitHub Personal Access Token.

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

Install the necessary packages​

npm 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.

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');

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

Next, import the CSS variables generated by @curology/ui-tokens. These variables are used by the Tailwind config to allow the same styles to be used by our different brands.

your-app.css
@import '@curology/ui-tokens/curology';
/* or */
@import '@curology/ui-tokens/agency';

Finally, include the Tailwind base and utility classes, as well as the appropriate fonts for Squeeze.

your-app.css
@import '@curology/ui-styles-web';