Usage

Setting up the theme

The set up for theming depends on whether your project uses Tailwind v4 or another CSS framework. The recommended approach is to use Tailwind v4 if your project supports it, so that your project has access to all the same theme variables and colors for consistency.

Please follow either of the setup configurations below depending on your project setup.

Tailwind v4

Import the Equality Tailwind v4 configuration into your global stylesheet (this includes preflight (base styles), theme colors, variables, utilities and components):

@import "@eqtylab/equality/theme-config.css";

Other CSS frameworks

Add the <ThemeProvider /> at the root of your app or wherever Equality components are used:

import { ThemeProvider } from "@eqtylab/equality";

<ThemeProvider>
  <YourApp />
</ThemeProvider>;

Use components

Each component includes its own scoped .module.css file — no need to import a global stylesheet.

import { Button } from "@eqtylab/equality";

export function Example() {
  return (
    <>
      <Button>Primary</Button>
    </>
  );
}

Because the styles use Tailwind v4 tokens (bg-primary, text-foreground, etc.), everything is resolved automatically based on the active theme.

Overriding styles with `className`

All components accept a className prop for fine-grained style adjustments. This lets you extend or override the default styles directly from your app without breaking isolation:

<Button className="bg-accent hover:bg-accent/80 text-white">
  Custom Button
</Button>