Two different bets
HeroUI is the rebrand of NextUI, and it carries that lineage's reputation for being one of the best-looking React libraries you can install. Under the polish sits a deliberate pair of choices: accessibility comes from Adobe's React Aria, and styling comes from Tailwind CSS v4 with CSS-variable theming on top. You get a large, opinionated catalogue of components that look finished out of the box and bend to your brand through Tailwind config and CSS variables.
The project's v3 generation tightened that story. It dropped the JavaScript animation runtime that earlier versions leaned on in favour of native CSS transitions, leaned into first-class React Server Components and React 19 support, and spun up a separate HeroUI Native package so the same design language can reach React Native. The result is a modern, fast-feeling web kit with a native sibling that ships as its own product.
Vireya overlaps with HeroUI on intent — accessible, good-looking React components you can theme — but diverges on nearly every mechanism underneath. There is no Tailwind: styling is static CSS Modules whose values are all `--v-*` design tokens. Accessibility is built on Radix and base-ui primitives rather than React Aria. And where HeroUI reaches mobile by shipping a second React Native component package, Vireya reaches mobile without rebuilding the UI at all — the same web app runs inside a native WebView shell with a typed RPC bridge for native functions.
HeroUI also keeps its pre-composed blocks and templates behind a commercial Pro tier, while Vireya bundles blocks and a charts library in the free package, all speaking the same tokens. HeroUI is the more established and visually mature choice today; Vireya (v0.1.0) is the younger, token-first bet. This comparison is about styling philosophy, theming model, and what arrives in the box.
Under the hood
Accessibility: React Aria vs Radix + base-ui
HeroUI builds behaviour on Adobe's React Aria — a mature collection of hooks and stateful primitives covering focus management, keyboard interaction, collections and internationalization across a wide component surface. It's a strong, standards-driven foundation and one of HeroUI's biggest selling points.
Vireya builds behaviour on Radix primitives plus base-ui on the web. The accessibility goals are the same — focus traps, ARIA wiring, keyboard semantics — but the primitive lineage differs, so the exact component APIs and composition patterns are not interchangeable when porting code across.
Styling: Tailwind v4 + CSS variables vs tokenized CSS Modules
HeroUI styles with Tailwind CSS v4 and layers CSS-variable theming on top, with automatic dark mode handled through that variable system. Your design lives in Tailwind config, utility classes and the variable overrides HeroUI exposes; re-theming means working within that Tailwind-plus-variables model.
Vireya ships static CSS Modules where every value resolves to a `--v-*` token. There is no Tailwind dependency and no runtime CSS-in-JS. Re-theming happens once at the token layer via `createTheme()` — a tier-based palette with light/dark and runtime switching — and components, blocks and charts all follow the same values.
Scope: separate products vs one bundled system
HeroUI's richer blocks and templates live in the commercial HeroUI Pro tier, and it ships no first-party charts. The web kit, the Pro block library and (separately) HeroUI Native are distinct products you assemble and, in Pro's case, pay for.
Vireya bundles pre-composed blocks plus a charts library in the free package, all on one token vocabulary. A landing page, a dashboard and its charts inherit the same token layer without stitching separate libraries together.
Reaching mobile: a second native package vs hybrid delivery
HeroUI's mobile answer is HeroUI Native — a separate React Native component package that re-expresses the design language in native views. It's a real native track, but it means a second library to adopt and a second component surface to build and maintain alongside the web kit.
Vireya takes the hybrid route instead. You build the UI once as a web app and run it inside a native WebView shell, with a typed RPC bridge (`@vireya/rpc`) wiring the native functions that matter — payments, sensors, push — while dynamic screens render straight from the web. It's the Mobile Bridge pattern Shopify documented and that commerce apps like Mercado Livre and Magazine Luiza use, so you reach mobile without maintaining a parallel native component set. The bridge is still maturing (Expo first), so it's the model Vireya is built around rather than a turnkey product today.
Side by side
| Vireya | HeroUI (formerly NextUI) | |
|---|---|---|
| Distribution | Versioned npm package, per-component subpaths | Versioned npm packages (@heroui/*) |
| Styling | CSS Modules + --v-* tokens, no Tailwind, no runtime CSS | Tailwind CSS v4 + CSS variables |
| Theming | createTheme() token engine, tier-based palette, light/dark | Tailwind v4 config + CSS variables, auto dark mode |
| Accessibility | Radix + base-ui primitives | React Aria |
| Charts & blocks | Bundled, shared tokens, free | Blocks via HeroUI Pro (paid); no first-party charts |
| Native mobile | Hybrid: web UI in a native WebView + typed bridge | Web; separate HeroUI Native package |
| RSC / Next.js | Server-friendly, per-component subpaths | First-class RSC support (v3) |
| Maturity | Early (v0.1.0), actively built | Established (NextUI lineage) |
Where HeroUI (formerly NextUI) shines
- React Aria gives HeroUI a deep, standards-based accessibility foundation covering focus, keyboard and internationalization across a wide component surface.
- The components look genuinely finished out of the box, with modern Tailwind v4 styling, CSS-variable theming and automatic dark mode.
- v3 dropped the JavaScript animation runtime in favour of native CSS transitions, trimming weight and leaning into first-class RSC and React 19 support.
- A real React Native track via HeroUI Native lets the same design language reach mobile alongside the mature web catalogue.
What Vireya does differently
- Theming is one `--v-*` token layer applied through `createTheme()`, not Tailwind config plus CSS-variable overrides — you re-theme at the tokens, not across utility classes.
- Styling is static CSS Modules with no Tailwind dependency and no runtime CSS-in-JS, so there's no utility vocabulary or Tailwind upgrade cycle to track.
- Blocks and a charts library are bundled for free and share the components' tokens, where HeroUI keeps its richer blocks in the paid Pro tier and has no first-party charts.
- Mobile is a hybrid path — the same web UI ships as a native app through a WebView shell and a typed bridge — rather than adopting and maintaining a second React Native component package like HeroUI Native.
When to choose HeroUI (formerly NextUI)
- You want React Aria's accessibility foundation specifically, and value its breadth and maturity.
- You're already fluent in Tailwind and happy to theme through Tailwind config plus CSS variables.
- You want a visually polished, established catalogue that looks finished with little custom design work.
- HeroUI Pro's commercial blocks and templates are a fit, and you're comfortable paying for that tier.
When to choose Vireya
- You'd rather theme through `--v-*` tokens than maintain Tailwind config and utility classes.
- You want charts and pre-composed blocks in the box for free, not behind a Pro tier.
- You'd rather reach mobile by shipping your web UI as a hybrid native+WebView app than adopt a separate React Native component package.
- You prefer static CSS Modules with no Tailwind dependency and no runtime CSS-in-JS.
Switching from HeroUI (formerly NextUI) to Vireya
Migrating from HeroUI to Vireya is more than a re-skin, because the foundations differ. HeroUI components are built on React Aria and styled with Tailwind v4; Vireya components are built on Radix plus base-ui and styled with tokenized CSS Modules. Component-level APIs won't map one-to-one, so you'll swap components rather than just retarget imports — though the accessible behaviour you relied on (focus, keyboard, dark mode) has an equivalent on Vireya's side.
The styling change is the bigger lift and the bigger payoff: instead of Tailwind utilities and CSS-variable overrides, you map your palette and spacing to `--v-*` tokens once via `createTheme()` and let components, blocks and charts inherit them. Teams typically migrate screen by screen since the two can coexist, retiring Tailwind config as Vireya surfaces take over. For mobile the path is different in kind: rather than maintaining a separate HeroUI Native build, you wrap the migrated web app in a native WebView shell and bridge native functions through `@vireya/rpc` — a hybrid model that's still maturing, so plan it as a trajectory rather than a drop-in today.
The bottom line
HeroUI is the more mature and visually polished choice, with React Aria's accessibility depth and a Tailwind v4 styling model that teams already in that world will feel at home in. Vireya makes a different bet: token-first theming through `createTheme()` instead of Tailwind, charts and blocks bundled for free rather than split across Pro, and a hybrid mobile path where the same web UI ships as a native app through a WebView shell and typed bridge instead of a second HeroUI Native package. If you want React Aria plus Tailwind today, HeroUI wins; if you want a self-contained, token-driven web system with batteries included and a path to mobile that doesn't fork into a parallel native codebase, Vireya is the more unified foundation — accepting that it's a younger project and the hybrid bridge is still maturing.
Still deciding? Read why teams choose Vireya, see how theming works, or browse the live blocks and charts showcases. You can also see other comparisons, browse UI library alternatives and the best library by use case, or read about HeroUI (formerly NextUI) directly.
Frequently asked questions
Is Vireya a HeroUI / NextUI alternative?
Yes, for teams who want token-driven styling without Tailwind, charts and blocks bundled for free, and a hybrid path to mobile rather than a second native component package. Both prioritise accessibility — HeroUI via React Aria, Vireya via Radix and base-ui — but the primitives and styling models differ.
Does Vireya use Tailwind like HeroUI?
No. HeroUI is built on Tailwind CSS v4 with CSS-variable theming on top. Vireya ships static CSS Modules driven by --v-* tokens, with no Tailwind dependency and no runtime CSS-in-JS. You re-theme at the token layer, not across utility classes.
How does accessibility compare between Vireya and HeroUI?
HeroUI builds on Adobe's React Aria, a broad, standards-driven set of accessibility primitives. Vireya builds on Radix plus base-ui on the web. Both target strong focus, keyboard and ARIA behaviour, but the primitive lineages differ, so component APIs don't map one-to-one.
How does reaching mobile compare?
HeroUI reaches mobile through HeroUI Native, a separate React Native component package you adopt and maintain alongside the web kit. Vireya is web-only as a component library but reaches mobile differently: the same web UI runs inside a native WebView shell with a typed bridge (@vireya/rpc) for native functions — the Mobile Bridge pattern Shopify documented and apps like Mercado Livre and Magazine Luiza use — so you don't rebuild the UI in React Native. The bridge is maturing, Expo first.
Are Vireya's blocks and charts free, unlike HeroUI Pro?
Yes. HeroUI's richer pre-composed blocks and templates live in the commercial HeroUI Pro tier, and it has no first-party charts. Vireya bundles blocks and a charts library for free, both sharing the components' tokens.
Which should I choose?
Choose HeroUI if you want React Aria accessibility, a mature visual catalogue and Tailwind v4 theming, and Pro's commercial blocks plus a separate HeroUI Native track fit your needs. Choose Vireya if you want token-driven theming without Tailwind, charts and blocks free in the box, and a hybrid path to mobile that ships your web UI as a native+WebView app rather than forking into a parallel native codebase.