@eqtylab/equality

EQTY Lab's design system: accessible React components and design tokens, built on Radix UI and Tailwind CSS v4.

Documentation · Components · GitHub

Installation

npm install @eqtylab/equality
# or
pnpm add @eqtylab/equality
# or
yarn add @eqtylab/equality

Requires react and react-dom 18.2 or newer.

Setup

Tailwind CSS v4 (recommended)

Import the theme config, then a preflight, in your global stylesheet:

@import '@eqtylab/equality/theme-config.css';
@import '@eqtylab/equality/preflight.css' layer(base);

theme-config.css must come first, because it declares the layer order the preflight relies on. It builds on Tailwind, so tailwindcss v4 must be installed in your project.

If you're embedding Equality in a site that has its own base styles, use preflight-scoped.css instead so the reset doesn't affect the rest of the page.

Without Tailwind

Wrap your app, or the part of it that uses Equality, in ThemeProvider:

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

export function Root() {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
}

See the Usage guide for embedding in host sites, shadow DOM, and portalled surfaces.

Usage

import { Button, Card, CardContent } from '@eqtylab/equality';

export function Example() {
  return (
    <Card>
      <CardContent>
        <Button>Save changes</Button>
      </CardContent>
    </Card>
  );
}

Every component accepts a className prop for local style overrides. Component styles are scoped with CSS Modules, so overrides don't leak into other components.

Themes

Equality ships light and dark themes. Set the active theme on the root element:

<html data-equality-theme="dark"></html>

To apply a stored or system preference before first paint, inline the initializeTheme script in your document <head>:

import { initializeTheme } from '@eqtylab/equality/scripts';

<head>
  <script>{initializeTheme()}</script>
</head>;

See Themes for options.

Entry points

The package ships ES modules and CommonJS builds with TypeScript types.

Accessibility

Components are built on Radix UI primitives and designed for keyboard navigation and screen readers.

License

Apache-2.0