Development

Alea UI kit

The React design system with motion built in: accessible components, design tokens for dark and light, and a Figma kit from the same source.

Version 0.1.0React 18.3+ · 19TypeScriptMIT core

Features

Over 200 components

From buttons and forms to data grids, charts, editors, scheduling and AI chat, in one consistent system.

Accessible by default

Keyboard, focus, screen readers, reduced motion and high contrast are built in and checked on every page.

Motion built in

Alea Motion gives every component its transitions and microinteractions, from tokens you can tune or turn off.

Dark, light and four looks

One set of tokens; Fun Lab, Glass, Midnight and Graphite on top, and your brand in a few lines.

Two languages

The kit's own text ships in English and Spanish, dates and numbers follow the locale, right-to-left works.

A Figma kit from the same tokens

Variables, styles and component sets generated from the code, never drawn by hand.

Browser support

The last two versions of Chrome, Edge, Firefox and Safari (16.4 and later), on desktop and mobile. The glass look bends light at its edges in Chromium browsers; the others show the same frosted glass without the bend. Server rendering works with any React framework.

Install

npm

pnpm

yarn

bun

Browser

npm install @alea/ui

Prefer to own the code? The CLI copies the source of the components you pick into your project. Installation guide

Usage

import '@alea/ui/styles.css';
import { ThemeProvider, Button } from '@alea/ui';

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

TypeScript

Alea is written in TypeScript and ships its types: every prop is typed and documented, so your editor completes them and explains each one. No extra packages are needed.

import type { ButtonProps } from '@alea/ui';

const primary: ButtonProps = { variant: 'primary', size: 'lg' };

Without React

The tokens and the motion layer are plain CSS: use them with any framework or none.

npm install @alea/tokens @alea/motion

@import '@alea/tokens/tokens.css';
@import '@alea/motion/motion.css';

.card { background: var(--alea-surface); border-radius: var(--alea-radius-lg); }

Need help?

Search the docs with ⌘K. For a bug, a question or an idea, write to hi@alevasquez.dev. Alea Pro customers get an answer within two business days.