Two different bets
React-Bootstrap takes Bootstrap — the most widely deployed CSS framework on the web — and reimplements its components as real React components. Crucially, it throws out jQuery: instead of Bootstrap's classic imperative plugins, dropdowns, modals and tabs become proper React components with real state, refs and a declarative API. The look and feel, however, still come from the Bootstrap stylesheet you include in your app.
That split is the heart of React-Bootstrap. The library owns behaviour and component structure; Bootstrap's CSS owns appearance. Theming therefore flows through Bootstrap's own machinery — Sass variables, utility classes and the vast ecosystem of prebuilt Bootstrap themes. For teams already fluent in Bootstrap, the learning curve is nearly flat and the visual ecosystem is enormous.
Vireya is self-contained by comparison. It doesn't depend on any external stylesheet: styling is static CSS Modules whose every value is a `--v-*` design token, accessibility behaviour comes from Radix and base-ui primitives, and theming is a `createTheme()` token engine rather than Bootstrap Sass variables. On top of the components it bundles pre-composed blocks and a charts library on the same tokens, and where React-Bootstrap stops at the web, Vireya offers a hybrid path to mobile — the same web UI running inside a native WebView with a typed bridge for native functions.
The two libraries sit at different points in their lives and in their philosophies. React-Bootstrap is mature, stable and tightly coupled to Bootstrap's design language and theme marketplace; Vireya (v0.1.0) is a younger, token-first system that owns its own styling end to end. The decision usually comes down to whether you want to live inside the Bootstrap ecosystem or own a self-contained token vocabulary.
Under the hood
Appearance: the Bootstrap stylesheet vs self-contained CSS Modules
React-Bootstrap renders Bootstrap's class names and relies on you loading the Bootstrap 5 stylesheet for all visual styling. The components themselves are largely unstyled markup until that CSS is present — appearance and behaviour are deliberately decoupled, which is why a Bootstrap theme can restyle a whole app without touching React.
Vireya ships its styling inside the package as static CSS Modules, with no external stylesheet to include. Every value resolves to a `--v-*` token, so the components arrive fully styled and self-contained, and there's no global Bootstrap CSS competing with the rest of your app.
Theming: Bootstrap Sass variables vs a token engine
To re-theme React-Bootstrap you customize Bootstrap itself — overriding Sass variables, recompiling, or dropping in one of the thousands of prebuilt Bootstrap themes. The theming surface is Bootstrap's, and its reach is its biggest asset: that theme marketplace is enormous and battle-tested.
Vireya re-themes at its own token layer through `createTheme()` — a tier-based palette with light/dark and runtime switching — and one set of `--v-*` values drives components, blocks and charts together. There's no Sass compile step and no external theme to reconcile; the trade is that you can't reuse Bootstrap's theme ecosystem.
Scope: Bootstrap component set vs bundled blocks and charts
React-Bootstrap's components are client components and it focuses on the Bootstrap component set; charts and richer page sections come from the wider Bootstrap theme ecosystem rather than the library itself.
Vireya bundles pre-composed blocks and a charts library that share the components' tokens, and is built to be server-friendly with per-component subpaths, so a marketing page and a dashboard stay consistent without sourcing extra libraries.
Reaching mobile: web-only vs hybrid delivery
React-Bootstrap is firmly a web library tied to the Bootstrap stylesheet. Shipping a mobile app means standing up a separate React Native effort or wrapping the web app yourself; there's no native delivery story in the box.
Vireya's defining bet is hybrid delivery. 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 native functions — payments, sensors, push — to the web screens while dynamic UI renders 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 rebuilding the UI in React Native. The bridge is still maturing (Expo first), so it's the model Vireya is built around rather than a turnkey product.
Side by side
| Vireya | React-Bootstrap | |
|---|---|---|
| Distribution | Versioned npm package, per-component subpaths | Versioned npm package + Bootstrap stylesheet |
| Styling | CSS Modules + --v-* tokens, self-contained | Bootstrap 5 stylesheet (class names) |
| Theming | createTheme() token engine, tier-based palette, light/dark | Bootstrap Sass variables / prebuilt themes |
| Accessibility | Radix + base-ui primitives | Implemented within its own components |
| Charts & blocks | Bundled, shared tokens, free | None (via Bootstrap theme ecosystem) |
| Native mobile | Hybrid: web UI in a native WebView + typed bridge | Web only |
| RSC / Next.js | Server-friendly, per-component subpaths | Client components |
| Maturity | Early (v0.1.0), actively built | Very mature, large ecosystem |
Where React-Bootstrap shines
- It's mature and stable, sitting on top of Bootstrap's enormous, battle-tested CSS ecosystem and thousands of ready-made themes.
- Components are true React — no jQuery — with proper state, refs and a declarative API instead of imperative plugins.
- It's MIT-licensed with full TypeScript support, so adopting it carries no licensing or typing friction.
- For any team already using Bootstrap, the learning curve is nearly flat and existing Bootstrap knowledge transfers directly.
What Vireya does differently
- Vireya is self-contained — its styling lives in the package as CSS Modules, with no Bootstrap stylesheet to include or global CSS to manage.
- Re-theming happens through a `--v-*` token engine and `createTheme()`, not by overriding Bootstrap Sass variables or recompiling a theme.
- Pre-composed blocks and a charts library are bundled and share the components' tokens, where React-Bootstrap ships neither and leans on the Bootstrap theme marketplace.
- Accessibility is built on Radix and base-ui primitives, and mobile is a hybrid path — the same web UI ships as a native app through a WebView shell and typed bridge — while React-Bootstrap is web-only.
When to choose React-Bootstrap
- Your team already knows Bootstrap and you want that knowledge to transfer with minimal ramp-up.
- You want to reuse the large ecosystem of prebuilt Bootstrap themes to restyle an app quickly.
- You're building web-only and value a familiar, stable, low-risk library.
- You prefer decoupling appearance (a stylesheet you swap) from component behaviour.
When to choose Vireya
- You want a self-contained system with no dependency on the Bootstrap stylesheet or global CSS.
- You'd rather theme through `--v-*` tokens than override Bootstrap Sass variables.
- You want charts and pre-composed blocks bundled on the same tokens as the components.
- You want a path to mobile that ships your web UI as a hybrid native+WebView app, and prefer accessibility on Radix/base-ui primitives.
Switching from React-Bootstrap to Vireya
Migrating from React-Bootstrap to Vireya is primarily a styling and theming change. The component mental model is familiar — both expose declarative React components for modals, dropdowns, tabs and the like — but the appearance moves from Bootstrap's external stylesheet into Vireya's self-contained CSS Modules. The biggest concrete step is removing the Bootstrap CSS dependency and the Sass variable overrides or theme you'd been layering on top.
In their place you map your palette and spacing into `--v-*` tokens once via `createTheme()` and let components, blocks and charts inherit them. Because the two can coexist, teams usually migrate screen by screen, replacing Bootstrap-styled surfaces as Vireya equivalents land and deleting the global Bootstrap stylesheet once the last surface is converted. The main thing to plan for is that any reliance on the Bootstrap theme marketplace won't carry over — that styling is re-expressed in tokens.
The bottom line
React-Bootstrap is the pragmatic choice when you're already in Bootstrap's world: it modernizes Bootstrap into real React components without jQuery, and the theme marketplace behind it is unmatched in size and maturity. Vireya makes the case for a self-contained system instead — styling owned in the package as token-driven CSS Modules, theming through `createTheme()` rather than Bootstrap Sass, charts and blocks bundled for free, and a hybrid path to mobile where the same web UI ships as a native+WebView app. If reusing Bootstrap themes and a flat learning curve matter most, React-Bootstrap wins; if you'd rather own a single token vocabulary end to end and have a route to mobile, Vireya is the more self-contained foundation — accepting that it's far younger 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 React-Bootstrap directly.
Frequently asked questions
Is Vireya a React-Bootstrap alternative?
Yes, for teams who want self-contained, token-driven styling and bundled charts/blocks instead of depending on the Bootstrap stylesheet. Vireya ships static CSS Modules with a --v-* engine, accessible components from Radix/base-ui, and a hybrid path to ship the same web UI as a native mobile app.
Does Vireya depend on Bootstrap CSS?
No. React-Bootstrap relies on the external Bootstrap 5 stylesheet for appearance. Vireya ships its own static CSS Modules driven by --v-* tokens inside the package, with no Bootstrap dependency and no global stylesheet to include.
Can I reuse Bootstrap themes with Vireya?
No — Vireya's theming is its own --v-* token system via createTheme(), not Bootstrap's Sass variables, so the Bootstrap theme marketplace doesn't carry over. If reusing prebuilt Bootstrap themes matters, React-Bootstrap fits better; if you want token-driven theming, Vireya does.
How does theming differ between Vireya and React-Bootstrap?
React-Bootstrap theming flows through Bootstrap — Sass variable overrides, recompilation, or prebuilt themes. Vireya themes at its own token layer with createTheme(): a tier-based palette with light/dark and runtime switching, where one set of --v-* values drives components, blocks and charts together.
Can Vireya or React-Bootstrap ship a mobile app?
React-Bootstrap is web-only — mobile means a separate React Native build or your own wrapper. Vireya is web-first but built for hybrid delivery: 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 reach mobile without rebuilding the UI. The bridge is maturing, Expo first.
Which should I choose?
Choose React-Bootstrap if your team is already on Bootstrap, you want its theme ecosystem, and you're building web-only. Choose Vireya if you want a self-contained, token-themed system with charts and blocks bundled and a hybrid path to ship the same UI as a native+WebView mobile app, and you're comfortable adopting a younger project.