'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
From install to shipped
React components with accessibility, motion and themes inside. Install one package, wrap your app and build; every page has live examples to copy.
npm install @alea/ui
npm install @alea/uiQuick start
Three steps
npm install @alea/ui
Try it
Props in, UI and code out
Every prop on every page works like this: change it and see the component and the code it takes.
<Button iconStart={<Sparkles />}>Save changes</Button>
In this section
Guides and tools
- IntroductionThe complete React design system: accessible components from forms to AI, Alea Motion, W3C design tokens and a Figma kit from the same source.
- InstallationInstall from npm or copy the source with the CLI, add the stylesheet and the theme provider.
- ThemingDark, light and system themes, per page or per area, and how to change the tokens for your brand.
- PlaygroundEvery component in every state, dark and light side by side.
What you get
Less to wire up
Typed and documented
Every prop is typed and described, and the docs tables come from the same source.
Renders on the server
Components render to HTML on the server, so pages show their content before the JavaScript loads.
Two languages built in
Labels, announcements, dates and numbers in English and Spanish, with your own strings on top.
Keyboard and screen readers
Focus, roles, names and announcements are handled inside each component.
Your brand in one call
brandVariables turns an accent, a radius and a density into a full theme.
Motion you control
One mode for the app, a preset per component, or none at all.
Packages
Take only what you need
@alea/uiThe components, their styles and the kit's strings.npm install @alea/ui@alea/motionThe motion patterns and helpers: Presence, AutoHeight, NumberRoll, TextSwap, Reveal.npm install @alea/motion@alea/tokensThe design tokens as CSS variables, JSON and Figma variables.npm install @alea/tokens@alea/cliCopy components into your project to own and edit them.npx alea add button select@alea/proCharts, DataGrid, the editors, Scheduler, MediaPlayer and premium effects.Alea Pro@alea/blocksReady sections and templates made from the components.Alea Pro
Recipes
Set up in your framework
// main.tsximport { createRoot } from 'react-dom/client';import { ThemeProvider } from '@alea/ui';import '@alea/ui/styles.css';import { App } from './App';createRoot(document.getElementById('root')!).render(<ThemeProvider defaultTheme="system"><App /></ThemeProvider>,);
Questions