'/%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}
Get started
Compatibility
What Alea runs on, what it renders with, and what it needs from the page. Everything here is checked on every release.
React
React 18.3 and React 19, with react-dom of the same version. Strict mode and concurrent features are supported. The packages are ES modules only; every modern bundler and framework handles them.
Package | Needs |
|---|---|
| @alea/ui | react, react-dom ≥ 18.3 |
| @alea/motion | react ≥ 18.3 (the CSS works without React) |
| @alea/tokens | nothing |
| @alea/pro | @alea/ui 0.1.0, @alea/motion 0.1.0, react-aria-components ≥ 1.10, lucide-react ≥ 0.500 |
| @alea/cli | Node 20 or newer |
Server rendering
Every component renders on the server with no window access during render; the browser-only parts (measurements, pointer light, view transitions) start in effects. The theme is set on the html element before hydration, so there is no flash and no hydration warning. This site is prerendered the same way.
Browsers
Browser | Versions | Notes |
|---|---|---|
| Chrome, Edge | Last two versions | Everything, including the light bending at the edges of glass surfaces and view transitions. |
| Firefox | Last two versions | Everything. Glass is frosted without the bend; page transitions are instant. |
| Safari | 16.4 and later | Everything. Glass is frosted without the bend; page transitions are instant on versions without view transitions. |
| iOS Safari, Android Chrome | Same as above | Touch targets are 44 px or larger; pointer-only effects stay out of the way. |
The baseline is what these browsers share: CSS nesting, container queries, color-mix(), :has(), the dialog element and the Popover API. Features beyond it (backdrop lensing, view transitions, scroll-driven animation) are progressive: the page works the same without them.
People's preferences
Reduced motion
Transitions shrink to opacity and the loops stop, from the system setting or the motion tokens.
High contrast and forced colors
Every look has a high contrast variant; in forced colors mode the system colors win and every boundary stays visible.
Right to left
Layouts use logical properties; set dir="rtl" on the html element and everything mirrors.
Languages
The kit's own words ship in English and Spanish; dates and numbers follow the locale you give the provider.
Frameworks
Vite, Next.js (App Router and Pages), React Router and Remix, Astro with the React integration, and a plain script tag through a CDN. Each setup has an example project that is built and opened in a browser on every release, checking the render, the theme switch and that the server markup hydrates with no warning. The steps are in the Installation guide.