Fluent 2 React Kit

Overview

Fluent 2 React Kit brings the visual language of Microsoft's Fluent 2 to React with shadcn/ui's APIs and developer experience. It is an independent, community-built open-source project, not affiliated with Microsoft, and uses no Fluent UI source code; its tokens are derived from publicly documented Fluent 2 design values.

Every component is a shadcn registry item that copies source into the project, and the kit is also published as the @graundtech/fluent2-react-kit npm package. The site is at version 0.6.0 and lists 35 components plus a theme item and a cn() utility. Each component ships with Vitest and Testing Library tests and an axe-core accessibility check, 494 tests in total.

Features

• Fluent 2 styling: Brand blue, flat surfaces, Fluent radius, elevation and motion scales, and a Segoe UI-first type stack.
• shadcn-style APIs: Function components with cva variants, data-slot hooks, asChild and familiar variant and size props.
• Three themes: Light, dark and high contrast, with automatic forced-colors support for Windows high-contrast mode.
• Fluent-specific components: Ribbon, ribbon collapse, split button, toolbar, overflow and multi-select.
• Core components: Accordion, alert, avatar, badge, button, card, combobox, command, dialog, dropdown menu, select, tabs, toast and tooltip.
• Single token layer: tokens.css drives everything through a Tailwind v4 @theme inline bridge.

Tech stack

• React, Tailwind CSS v4, Base UI
• class-variance-authority, @fluentui/react-icons
• Vitest, Testing Library, axe-core

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @fluent2-react-kit/component-name