Equality

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

Prerequisites

• Node 22.12+ (Astro 6 requires Node ≥ 22.12.0)
• pnpm 9.x (workspace uses packageManager: pnpm@9.12.3)

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

importReactfrom'react';import{createRoot}from'react-dom/client';import{ThemeProvider}from'@eqtylab/equality';importAppfrom'./App';createRoot(document.getElementById('root')!).render(<React.StrictMode><ThemeProvider><App/></ThemeProvider></React.StrictMode>);

3. Import and use components:

import{Button,Card}from'@eqtylab/equality';constTest=()=>{return(<Card><CardContent><p>Thisisatestcardwithbutton</p><Button>Clickme</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 GitHub Packages when changes to packages/ui/package.json are pushed to main.

To release manually from the command line:

pnpm release

Requirements:

• You must be authenticated with GitHub Packages and have publish rights.
• Ensure you have updated the version in packages/ui/package.json before releasing.

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.