aria-lab

React Aria component library with full accessibility.

Installation

npm install aria-lab

Usage

import { Button, Input, TextField, UI } from "aria-lab";
import "aria-lab/styles";
import "aria-lab/theme/default";

function App() {
  return (
    <>
      <Button>Click me</Button>
      <Input placeholder="Enter text" />
      <TextField label="Email" placeholder="you@example.com" />

      {/* Or use UI namespace */}
      <UI.Button variant="secondary">Secondary</UI.Button>
    </>
  );
}

Theming

Override CSS variables in your CSS:

:root {
  /* Colors */
  --aria-accent: #8b5cf6;
  --aria-text-primary: #1f2937;

  /* Radius */
  --aria-radius-md: 0.75rem;

  /* Focus ring */
  --aria-focus-ring: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6;
}

Default Theme

Import prebuilt component styles and the default shadcn-like theme:

import "aria-lab/styles";
import "aria-lab/theme/default";

Tokens Only

Import only CSS variables (without default values):

import "aria-lab/theme/tokens";

Development

# Install dependencies
pnpm install

# Build the library
pnpm build

# Run showcase (components + theme generator)
pnpm dev:showcase

# Run storybook
pnpm storybook

Packages

• packages/aria-lab - Component library
• apps/showcase - Components showcase + theme generator (customize theme, copy CSS)
• apps/storybook - Storybook documentation

License

MIT