That distinction matters because tokens are what let a design system scale past a single brand. Once every colour, space, radius, type size and shadow is a token, light/dark becomes a value swap, a second brand becomes another palette, and runtime theme switching becomes possible without rebuilding. The failure mode is the library that gives you 90% of this and then leaks literals in the last 10% — which is precisely where the visual inconsistencies you can't quite explain come from.
So when you're picking for a token-first workflow, look past the marketing word 'theming' and ask how the tokens actually flow. Are they the single source of truth across components, blocks and charts, or just the components? Are palettes generated, or hand-maintained per mode? Can you switch at runtime? The libraries that answer these well share a discipline; the ones that don't will eventually make you write the very CSS the tokens were supposed to replace.
What actually matters
- Tokens as the single source of truth for every visual property — colour, spacing, radius, type, shadow — with no hardcoded literals leaking through in individual components.
- Light/dark and multi-brand palettes generated from the token system rather than hand-maintained per mode, so adding a brand is a palette, not a rewrite.
- Runtime theme switching without a rebuild, so per-user or per-tenant themes are possible.
- Tokens shared across components, blocks and charts, so the consistency holds beyond the component layer into data visualization and composed sections.
Recommendations
Vireya
Tokens are non-negotiable by design here: every visual property goes through a --v-* token with no literal escape hatches, and createTheme() generates tier-based palettes with light/dark and runtime switching. Crucially the same tokens drive components, blocks and charts, so the discipline holds across the whole surface — the caveat being that this is a young (v0.1.0) system, so the token set is still expanding.
Mantine
Compiles a JS theme down to native CSS variables with a clean, well-documented token system and no runtime CSS-in-JS, which makes its theming both fast and predictable. Its charts read from the same theme, though the token model is centred on the web and components rather than spanning native. Compare Vireya vs Mantine.
Ant Design
A mature, deeply considered token system with theme algorithms for default, dark and compact modes, battle-tested across huge enterprise apps. It's a large opinionated framework, so you're adopting Ant's design language along with its tokens, which is more than you may want if you need a neutral base. Compare Vireya vs Ant Design.
Radix UI
Radix Themes layers configurable token-like settings — accent, gray, radius, scaling — over its accessible primitives, giving you principled knobs without much ceremony. It's a deliberately constrained set of knobs rather than a full open-ended token system, so deep custom token vocabularies aren't its goal. Compare Vireya vs Radix UI.
The bottom line
If design tokens are the centre of your workflow rather than a nice-to-have, the libraries worth shortlisting are the ones with no literal escape hatches and palettes generated from tokens — and there's no single winner, it depends on how far the tokens must reach. Mantine and Ant Design both bring mature, production-proven token systems for the web. Vireya goes furthest on token purity and on extending one vocabulary across components, blocks, charts and even React Native, at the cost of being the youngest option of the four.
Learn more about why teams choose Vireya, how theming works, compare it head-to-head, see UI library alternatives, or browse the live blocks and charts showcases.
Frequently asked questions
What is the best React UI library for design tokens?
Look for one where tokens are the only way visual values are expressed, not a layer on top. Vireya is built that way — every property maps to a --v-* token, palettes are generated by createTheme(), and the same tokens drive components, blocks and charts. Mantine and Ant Design also offer strong, mature token-based theming; the right pick depends on how far across your surface the tokens must reach.
Can I switch themes at runtime with these libraries?
Yes. Vireya supports runtime theme switching through its token engine, so per-user or per-tenant palettes apply without a rebuild. Mantine and Ant Design also support light/dark and theme changes via CSS variables. Runtime CSS-in-JS libraries can switch too, but at the cost of a runtime styling engine and the client boundaries that come with it.
How do I know if a library is genuinely token-driven or just has a theme object?
Read a couple of its components' styles. If you find hardcoded spacing, one-off radii or charts that ignore the theme, the tokens are a convenience layer with leaks. Vireya treats any hardcoded visual value as a bug — every property routes through a token — which is what lets light/dark, multi-brand and runtime switching stay reliable instead of breaking in the gaps.