Equality

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

The library is published to npm as @eqtylab/equality.

Prerequisites

• Node 22.12+ (Astro 6 requires Node ≥ 22.12.0)
• pnpm 12.x (workspace uses packageManager: [email protected])

Verify versions:

node -v
pnpm -v

Install

From the repository root:

pnpm install

This installs all workspace packages under packages/.

Useful commands (from repo root)

• Start dev servers (Astro docs site + design token watcher):

  pnpm dev
  

• Build everything (UI lib and any other packages):

  pnpm build
  

• Build only the UI library package:

  pnpm -F @eqtylab/equality build
  

• Format code with Prettier:

  pnpm format
  pnpm format:check
  

You can also run commands within individual packages, e.g. the demo:

pnpm -F demo dev

Project structure

• packages/ui — the published component library @eqtylab/equality
• packages/demo — Vite + React demo app consuming the library

Using the library (in the demo or another app)

1. Install the package (within your app workspace):

pnpm add @eqtylab/equality

2. Add theme styles, either via the Tailwind v4 config import in your global CSS (recommended if using Tailwind v4) or by importing ThemeProvider in your app entry:

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

See the Usage guide for the available stylesheets and how to embed Equality in a site that has its own base styles.

Or

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider } from '@eqtylab/equality';

import App from './App';

createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

3. Import and use components:

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

const Test = () => {
  return (
    <Card>
      <CardContent>
        <p>This is a test card with button</p>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Notes:

• The prebuilt CSS works without configuring Tailwind in the consuming app.

Developing the UI library

• Source: packages/ui/src (components under src/components, exports in src/index.ts)
• Styles/Tokens: packages/ui/src/theme/theme.module.css

Build the library locally:

pnpm -F @eqtylab/equality build

Watch mode (library only):

pnpm -F @eqtylab/equality watch

Then, in another terminal, run the demo to test changes:

pnpm -F demo dev

Releasing the library

Releases are automatically published to npm when changes to packages/ui/package.json are pushed to main. The workflow skips publishing if that version already exists, so bump the version in packages/ui/package.json to release.

To release manually from the command line:

pnpm release

This requires being logged in to npm (npm login) with publish rights on the @eqtylab scope.

The docs framework, @eqtylab/docs, is published by its own workflow when the version in packages/docs/package.json changes, and tagged docs-v<version>. To release it by hand, run pnpm release in packages/docs.

Both workflows publish through npm trusted publishing, so neither needs a token. Each package names its workflow under Settings → Trusted Publisher on npmjs.com: publish.yaml for @eqtylab/equality, publish-docs.yaml for @eqtylab/docs.

Troubleshooting

• If the demo doesn’t start, ensure Node ≥ 18 and pnpm ≥ 9.
• If styles don't appear, confirm the CSS imports listed in the Usage guide.