Accessible React components that re‑theme from one variable.
Built on Base UI, styled from a token system that derives its whole palette from a single seed colour — in pure CSS, with contrast that is measured rather than promised, and nothing added to your bundle.
Try a palette
Start here
Two guides, one for each bundler, and the studio for when you would rather see the theme than read about it.
Introduction
What the library is, the three decisions behind it, and the two lines that get a themed component on screen.Next.js
From create-next-app to a themed component, with and without Tailwind.Vite
The same walkthrough for a Vite app, including the one line Vite's CSS pipeline needs.AI agents
Point a coding agent at the component catalogue the package ships, so it picks the right part first time.Theming
The seed, the ramp it derives, and the scopes that let one page carry two themes.Theme Studio
Pick a colour, a font and a radius, watch the site rebuild, and export the CSS.
Real components, right here
Everything below is the actual library. Try it with a keyboard — every control is reachable, and the focus ring stays visible on any background.
Time zone
What you get
One variable, whole system
Set a seed colour and twelve accent steps, brand-tinted neutrals, and a readable text colour derive themselves — in both light and dark mode, in pure CSS.
Contrast that is measured
The ramp is verified against 119,108 in-gamut seeds. Text on a solid fill never drops below 4.5:1, whichever brand colour you pick.
Motion that listens
Reduced motion is handled once, in the token layer. Movement stops, fades stay, and state that was carried by movement gets a second cue.
Built on Base UI
Keyboard behaviour, focus management and ARIA come from primitives that are tested across browsers, platforms and screen readers.
Yours to override
Everything ships inside a cascade layer, so your CSS and your utility classes win without a single !important.
No runtime
No animation library, no CSS-in-JS, no theme provider. The components render, the browser does the rest.
Ready when you are
One package, one stylesheet import, no provider. Pick the guide for your bundler and you will be rendering a themed component in a few minutes.
npm install @forte-ui/react