Two different bets
Fluent UI React v9 is Microsoft's enterprise component suite, and it carries the weight you'd expect from that lineage. It implements Fluent Design — the language behind Microsoft 365, Teams, Outlook on the web and Windows surfaces — so apps built with it feel native to the Microsoft ecosystem. Accessibility is a headline commitment backed by Microsoft's own product requirements, and the component set is broad and rigorously typed.
Under the hood, v9 styles components with Griffel, Microsoft's atomic CSS-in-JS engine, and themes them through design tokens supplied by a `FluentProvider`. Griffel deduplicates styles into atomic classes at runtime and is engineered for the scale Microsoft ships at. If your product lives inside or alongside Microsoft 365, that alignment is a real advantage: the look, the tokens and the interaction patterns all match what your users already know.
Vireya is built on different foundations. It's a versioned `@vireya/*` package styled with static CSS Modules — there's no Griffel and no runtime CSS-in-JS engine; the styles are emitted at build time and driven entirely by `--v-*` tokens. Its design language is deliberately neutral and brandable rather than tied to Fluent, and it bundles a charts library and pre-composed blocks under that same token layer. It also opens a path off the web that Fluent doesn't: ship the same web UI as a hybrid native app rather than building a second mobile stack.
The honest framing is about ecosystem fit and styling model. Fluent UI is the right call when you're building for Microsoft 365 and want Microsoft-backed, accessible components in the Fluent aesthetic. Vireya is the right call when you want a neutral system you brand yourself, static CSS instead of CSS-in-JS, and a route to mobile that reuses the web UI. Vireya is early (v0.1.0) and far smaller than Microsoft's offering, so this is about fit and approach, not scale.
Under the hood
Styling: Griffel CSS-in-JS vs static CSS Modules
Fluent UI v9 uses Griffel, an atomic CSS-in-JS engine that generates and deduplicates styles, applying them through a runtime (with build-time extraction options). Styling is expressed in `makeStyles` definitions and themed through tokens injected by `FluentProvider`. It's fast and battle-tested, but it is a styling runtime in your app.
Vireya ships static CSS Modules whose values are all `--v-*` tokens. There is no CSS-in-JS engine and nothing computing styles at runtime — the CSS is emitted at build time and re-themed by changing token values once through `createTheme()`, which keeps the runtime free of a style layer.
Design language: Fluent Design vs neutral and brandable
Fluent UI is the embodiment of Microsoft's Fluent Design. Its color roles, depth, motion and component shapes are tuned to match Microsoft 365, which is exactly what you want for apps that live in that world — and a constraint if you want a distinct brand.
Vireya's language is intentionally neutral. The tier-based palette and `--v-*` tokens let you brand the entire system without inheriting any vendor's aesthetic, so the UI reads as your product rather than as a Microsoft surface.
Scope: components vs components + blocks + charts
Fluent UI focuses on the component suite; data visualisation lives in a separate package (`@fluentui/react-charting`) and there's no bundled set of pre-composed blocks, so you assemble higher-level surfaces yourself.
Vireya bundles a charts library and pre-composed blocks beside the components, all sharing the same tokens, so charts and sections theme together with the rest of the UI out of the box.
Reaching mobile: web-only vs hybrid delivery
Fluent UI React v9 is a web suite. Taking a Fluent app to mobile means a separate native build — there's no first-party story for getting the same UI onto a phone, so the desktop/web app and any mobile app are two efforts.
Vireya's distinguishing 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`) connecting the native functions you actually need — payments, sensors, push — while screens render from the web. It's the Mobile Bridge pattern Shopify documented and that commerce apps like Mercado Livre and Magazine Luiza adopted, so you reach mobile without rewriting the UI in React Native. The bridge is still maturing (Expo first via `@vireya/platform-expo`).
Side by side
| Vireya | Fluent UI (React v9) | |
|---|---|---|
| Distribution | Versioned npm package | Versioned npm package (@fluentui/react-components) |
| Styling | CSS Modules + --v-* tokens, no runtime CSS | Griffel atomic CSS-in-JS |
| Design language | Neutral, brandable | Fluent Design (Microsoft 365) |
| Theming | Token engine, tier-based palette, light/dark | Design tokens via FluentProvider |
| Charts & blocks | Bundled, same tokens | Charts in a separate package; no blocks |
| Native mobile | Hybrid: web UI in a native WebView + typed bridge | Web only |
| Accessibility | Radix + base-ui primitives | Accessible by default (Microsoft) |
| Maturity | Early (v0.1.0), actively built | Mature, Microsoft-backed |
Where Fluent UI (React v9) shines
- It's backed and maintained by Microsoft, with the resourcing and longevity that implies for an enterprise suite.
- Accessibility is a first-class, Microsoft-enforced requirement, so components are accessible by default across the suite.
- Griffel's atomic CSS-in-JS is engineered for scale, deduplicating styles efficiently across large applications.
- For products inside or adjacent to Microsoft 365, the Fluent Design alignment gives instant visual and behavioural familiarity for users.
What Vireya does differently
- Vireya styles with static CSS Modules and `--v-*` tokens — there's no Griffel and no runtime CSS-in-JS engine in your bundle.
- Its design language is neutral and brandable rather than the Fluent / Microsoft 365 aesthetic, so the UI looks like your product.
- A charts library and pre-composed blocks ship bundled and share the components' tokens; Fluent's charts are a separate package and it offers no blocks.
- Vireya is built for hybrid delivery — the same web UI ships to mobile inside a native WebView shell with a typed bridge for native functions — where Fluent UI React v9 stops at the web.
When to choose Fluent UI (React v9)
- You're building for the Microsoft 365 / Fluent Design ecosystem and want to match it.
- You want Microsoft-backed, accessible-by-default enterprise components with long-term institutional support.
- You're comfortable running Griffel's atomic CSS-in-JS as your styling layer.
- Web is your only target and the Fluent aesthetic is a feature for your users.
When to choose Vireya
- You want a neutral, brandable design system rather than the Fluent look.
- You'd rather ship static CSS than run a CSS-in-JS engine at runtime.
- You want a charts library and pre-composed blocks bundled under one token vocabulary.
- You want a path to ship the same UI as a hybrid mobile app rather than building a second native stack.
Switching from Fluent UI (React v9) to Vireya
Both Fluent UI v9 and Vireya are versioned packages with token-based theming, so the component mental model and the idea of theming-by-token carry over cleanly. The visible change is the design language: moving off Fluent means the UI stops looking like Microsoft 365 and starts looking like your brand, which is usually the reason for the move — expect a design pass rather than a one-to-one swap.
The deeper change is the styling model. Fluent's Griffel `makeStyles` and `FluentProvider` tokens give way to Vireya's static CSS Modules and a single `createTheme()` call mapping your palette and spacing onto `--v-*` tokens, removing a styling runtime from the bundle. You also gain a bundled charts library in place of `@fluentui/react-charting`, plus blocks Fluent doesn't ship, and a path to ship the same UI as a hybrid mobile app via a native WebView shell. Teams typically migrate surface by surface while both coexist.
The bottom line
Fluent UI React v9 and Vireya are both versioned, token-themed suites, but they serve different worlds. If you're building inside the Microsoft 365 ecosystem and want Microsoft-backed, accessible components in the Fluent aesthetic, Fluent UI is the obvious and well-resourced choice. If you want a neutral, brandable system, static CSS instead of Griffel CSS-in-JS, bundled charts and blocks, and a path to ship the same UI as a hybrid native+WebView mobile app, Vireya is the better fit — accepting that it's a far younger and smaller project.
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 Fluent UI (React v9) directly.
Frequently asked questions
Is Vireya a Fluent UI alternative?
Yes, for teams who want a neutral, brandable design system rather than the Fluent / Microsoft 365 aesthetic, with static CSS instead of Griffel CSS-in-JS. Vireya bundles tokenized components, blocks and charts, and adds a path to ship the same UI as a hybrid mobile app.
Does Vireya use CSS-in-JS like Fluent UI's Griffel?
No. Fluent UI v9 styles with Griffel, an atomic CSS-in-JS engine. Vireya ships static CSS Modules driven by --v-* tokens, emitted at build time, so there's no styling runtime in your bundle.
Is Vireya tied to a design language like Fluent?
No. Fluent UI implements Microsoft's Fluent Design. Vireya is a neutral, token-driven system you brand through --v-* tokens — if you specifically want the Microsoft 365 look, Fluent UI is the better fit.
Does Vireya include charts like Fluent UI?
Vireya bundles a charts library that shares the components' --v-* tokens. Fluent UI's charts live in a separate package (@fluentui/react-charting) and aren't part of the core component suite, and Fluent offers no pre-composed blocks.
Can Fluent UI or Vireya ship a mobile app?
Fluent UI React v9 is web only — mobile means a separate native build. Vireya is built for hybrid delivery: the same web UI runs inside a native WebView shell with a typed bridge 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 Fluent UI if you're building for Microsoft 365 and want Microsoft-backed, accessible Fluent Design components. Choose Vireya if you want a neutral brandable system, static CSS over CSS-in-JS, bundled charts and blocks, and a path to ship the same UI as a hybrid mobile app.