Get started

Installation

Install the package, or copy the components you need. Either way, add the stylesheet and the theme provider.

1. Install

npm install @alea/ui react-aria-components lucide-react

2. Add the styles and fonts

The stylesheet has the tokens and every component. The fonts are Crimson Pro, Inter and JetBrains Mono.

// main.tsx
import '@alea/ui/styles.css';

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400&family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap" rel="stylesheet" />

3. Wrap the app

ThemeProvider sets dark, light or system on the page and remembers the choice. ToastProvider is needed only for toasts.

import { ThemeProvider, ToastProvider, Button } from '@alea/ui';

export function App() {
  return (
    <ThemeProvider defaultTheme="system">
      <ToastProvider>
        <Button>Hello</Button>
      </ToastProvider>
    </ThemeProvider>
  );
}

With Tailwind

The tokens also come as a Tailwind v4 theme, so utilities and components share the same values: bg-surface, text-muted, rounded-field, p-4.

@import 'tailwindcss';
@import '@alea/tokens/tailwind.css';