Get started

Editor setup

Alea ships what an editor needs: types for every prop, the tokens as CSS data, readable sources, and the docs in a form AI assistants can read.

TypeScript

Every package ships its own types, so the editor completes props, explains them and catches a wrong value. Nothing to install. Two compiler options make the imports resolve the way the packages are published:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "strict": true
  }
}

Prop types are exported next to each component; token paths are a union type, so a typo in a token name is an error:

import type { ButtonProps, SelectProps } from '@alea/ui';
import { tokens, type TokenPath } from '@alea/tokens';

const path: TokenPath = 'color.accent.default';
tokens[path].css; // 'var(--alea-accent)'

CSS variables in the editor

The tokens package includes a CSS custom data file: every --alea-* variable with its description and its dark and light values. Point the editor at it and the variables complete inside any CSS file, with the values on hover.

1
Tell the editor where the file is
Visual Studio Code and editors built on it read css.customData from the workspace settings.
.vscode/settings.json
```
{
  "css.customData": ["./node_modules/@alea/tokens/dist/alea.css-data.json"]
}
```

Use a token

Type var(--alea- and pick from the list. The description says what the token is for and what it resolves to in each theme.

src/card.css

.card {
  background: var(--alea-surface);
  border: 1px solid var(--alea-border);
  border-radius: var(--alea-radius-lg);
  padding: var(--alea-space-4);
}

Readable sources

With the CLI the components live in your project (src/components/ui by default), so "go to definition" opens the real source and you can change it. With the npm package, the published files keep their names and comments, and source maps point back to the TypeScript.

npx @alea/cli add button select
npx @alea/cli list

AI assistants

The whole documentation is also published as plain text for AI assistants, one line per page with its summary, and every page has a text version. Give your assistant the index and it can answer with the real props and the real tokens.

https://alea.alevasquez.dev/llms.txt

Formatting and linting

Alea has no formatting rules of its own: the packages are plain ES modules and the components render native elements with the right roles, so your existing formatter and accessibility lint rules apply as they are.