The problem with rolling your own
Building a component library in-house starts cheap and gets expensive. Buttons, inputs, menus and dialogs each need accessible behaviour, keyboard handling, focus management, theming and tests. Multiply that by a hundred components and a few platforms, and you have a second product to maintain — one that drifts out of sync the moment the original team moves on.
Copy-paste libraries solve the starting cost but not the maintenance one: every fix has to be re-pasted by hand across every project that copied the code. Vireya keeps you on a versioned package, so improvements arrive with an upgrade instead of a migration.
One vocabulary, three layers
Vireya is organised so you adopt only what you need, and everything speaks the same token language:
- @vireya/core — the single source of truth: design tokens, themes and helpers that every other package reads.
- @vireya/ui — 120+ React components, accessible by default, each importable on its own subpath so your bundle only ships what you use.
- @vireya/blocks — pre-composed sections (hero, pricing, features, footers) you customise through props instead of rebuilding markup.
Explore the blocks showcase and the charts showcase to see every family with live examples and source.
Enterprise consistency by construction
Because every visual property — colour, spacing, radius, typography, motion, elevation — resolves to a --v-* design token, a single change propagates across every component and every app at once. There are no one-off hard-coded values to hunt down, which is exactly what keeps a large product visually coherent as it grows and as teams hand work back and forth.
Theming without rewriting CSS
A tier-based palette (background, secondary, primary, accent) generated from a few HSL inputs lets you stand up a fully branded theme — light and dark — without touching component styles. Read how it works in the theming & design tokens guide.
Built for modern React and hybrid delivery
Vireya targets React 19 and Next.js 16. Components that need browser APIs ship a use client directive; the rest are server-component friendly. But the part that sets Vireya apart is what happens beyond the browser: the same token system and component vocabulary carry from the web into a native WebView, so you can ship your UI as a mobile app without rebuilding it in React Native.
This is the hybrid model proven at scale — Shopify's Mobile Bridge, and the way large commerce apps like Mercado Livre and Magazine Luiza work: dynamic screens render from the web in a WebView, while payments, sensors and push stay native, connected by a typed bridge. Vireya bakes that architecture in, with @vireya/rpc as the typed channel and Expo as the first supported native shell. Read the full story on the hybrid apps guide.
When Vireya is — and isn't — for you
Reach for Vireya when you want a maintained, themeable system with components, blocks and charts under one roof, and you value receiving improvements through versioned upgrades. If you specifically want to own and fork every line of component source with no dependency, a copy-paste approach may suit you better — see how the two compare in Vireya vs shadcn/ui.