'/%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}
The React UI design system with motion built in
Accessible components on React Aria, Alea Motion for every state change, and tokens that drive both the code and the Figma library. Elegant, interactive and fast to build with.
Theming
Make it yours
Pick an accent, a radius and a density. Every component follows, in dark and light, with readable contrast mixed for each theme.
Checkout
ProWhy Alea
Everything a product needs
Accessible by default
Built on React Aria: keyboard, screen readers and focus handled. Every page is checked with axe in dark and light.
Motion with meaning
Alea Motion: fourteen named patterns from tokens. Overlays pop from their trigger, selection glides, errors nudge. Reduced motion respected.
Tokens, dark and light
One set of tokens for CSS variables, Tailwind, JavaScript and Figma variables. Switch a page or a single card.
The same in Figma
A Figma library generated from the same tokens: every component, its properties, Dark and Light, and docs on every page.
Responsive to the core
Values per breakpoint for columns, spans, gaps and direction. Navbars, grids and templates that reflow from phones to wide screens.
Blocks and templates
Landing sections, dashboards, lists, forms, profiles and error pages, ready to start a client project.
Alea Motion
Every state change explains itself
Try them: the selection glides, the panel expands, the switch springs, the toast rises.
glide
morph · press
expand