---
name: "@fluent2-react-kit"
slug: "fluent2-react-kit"
description: "Fluent 2-inspired React components with shadcn-style APIs. Design tokens with light, dark, and high-contrast themes, Base UI primitives, Tailwind CSS v4. Independent open-source project, not affiliated with Microsoft."
category: "Forms"
tags: ["buttons", "cards", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "theming"]
framework: "react"
license: null
author: null
website: "https://fluent2-react-kit.graund.io"
github: null
registry: "https://fluent2-react-kit.graund.io/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 37
generated_at: "2026-09-21T01:50:16.753Z"
---

# @fluent2-react-kit

Fluent 2-inspired React components with shadcn-style APIs. Design tokens with light, dark, and high-contrast themes, Base UI primitives, Tailwind CSS v4. Independent open-source project, not affiliated with Microsoft.

## Links

- Website: https://fluent2-react-kit.graund.io
- Registry JSON: https://fluent2-react-kit.graund.io/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/fluent2-react-kit
- This file: https://sh4dcn.vercel.app/md/fluent2-react-kit.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://fluent2-react-kit.graund.io/r/registry.json
pnpm dlx shadcn@latest add https://fluent2-react-kit.graund.io/r/registry.json
bunx shadcn@latest add https://fluent2-react-kit.graund.io/r/registry.json
# fetch the raw registry index
curl -s https://fluent2-react-kit.graund.io/r/registry.json
```

## Components (37)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | Fluent 2-styled accordion (expand/collapse groups) with a shadcn API. Built on @base-ui/react's Accordion for open/close state and a height-animated collapsibl… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/accordion.json` |
| alert | registry:ui | Fluent 2 MessageBar-styled alert with shadcn APIs. Three composable parts (Alert, AlertTitle, AlertDescription), five variants (default, destructive, success, … | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/alert.json` |
| avatar | registry:ui | Fluent 2-styled avatar with shadcn APIs. Built on @base-ui/react's Avatar primitive for genuine image-loading state; renders brand-tinted initials as a fallbac… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/avatar.json` |
| badge | registry:ui | Fluent 2-styled badge with shadcn APIs. Six variants (default, secondary, destructive, outline, success, warning) as a compact pill, with icon support and asCh… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/badge.json` |
| breadcrumb | registry:ui | Fluent 2-styled breadcrumb with shadcn APIs. Seven composable parts (Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSepa… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/breadcrumb.json` |
| button | registry:ui | Fluent 2-styled button with shadcn APIs. Six variants (default, secondary, outline, ghost, destructive, link) and six sizes, brand state ramp, asChild support,… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/button.json` |
| card | registry:ui | Fluent 2-styled card with shadcn APIs. Seven composable parts (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter), Fluent resti… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/card.json` |
| checkbox | registry:ui | Fluent 2-styled checkbox with shadcn APIs. Built on @base-ui/react's Checkbox primitive for real form participation and keyboard behavior; supports checked, un… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/checkbox.json` |
| combobox | registry:ui | Fluent 2-styled filterable select with shadcn-style composable APIs. Built on @base-ui/react's Combobox for portalled positioning, focus management, keyboard n… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/combobox.json` |
| command | registry:ui | Fluent 2-styled command palette (cmdk surface) with shadcn-style composable APIs, built on @base-ui/react's Autocomplete with NO cmdk dependency. An always-vis… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/command.json` |
| dialog | registry:ui | Fluent 2-styled modal dialog with shadcn APIs. Built on @base-ui/react's Dialog for focus trapping, portalling, scroll locking and Escape/outside-press dismiss… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/dialog.json` |
| dropdown-menu | registry:ui | Fluent 2-styled dropdown menu with shadcn APIs. Built on @base-ui/react's Menu for portalled positioning, focus management, keyboard navigation, type-ahead and… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/dropdown-menu.json` |
| input | registry:ui | Fluent 2-styled text input with shadcn APIs. 32px medium field, file-input styling, and the signature Fluent bottom brand accent on focus (inset box-shadow, no… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/input.json` |
| label | registry:ui | Fluent 2-styled form label with shadcn APIs. Native <label> (no JS primitive needed), 14px/600 Fluent type ramp, peer/group disabled ergonomics, and an optiona… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/label.json` |
| link | registry:ui | Fluent 2-styled link with shadcn APIs. Brand-colored text with a hover-only underline for standalone use or a persistent underline for links inline in prose, a… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/link.json` |
| multi-select | registry:ui | Fluent 2-styled multiple-selection combobox with a chips field, built on the kit's Combobox. Selected values render as removable secondary chips in a wrapping … | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/multi-select.json` |
| overflow | registry:ui | Headless priority-overflow system — the core mechanism behind a single-line Fluent 2 Ribbon. A row of controls that cannot fit hides its lowest-priority items … | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/overflow.json` |
| pagination | registry:ui | Fluent 2-styled pagination with shadcn APIs. Seven composable parts (Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, Paginat… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/pagination.json` |
| popover | registry:ui | Fluent 2-styled non-modal popover with shadcn APIs. Built on @base-ui/react's Popover for portalled positioning, focus management, and outside-press/Escape dis… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/popover.json` |
| progress | registry:ui | Fluent 2-styled progress bar with a shadcn API. Wraps Base UI's Progress primitive (Root/Track/Indicator) into a single `Progress` component: a thin 2px determ… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/progress.json` |
| radio-group | registry:ui | Fluent 2-styled radio group with shadcn APIs. Built on @base-ui/react's RadioGroup and Radio primitives for roving-tabindex keyboard navigation and native form… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/radio-group.json` |
| ribbon-collapse | registry:ui | Headless group-collapse system — the mechanism behind a classic (expanded) Fluent 2 Ribbon. When a two-row band cannot fit its container it collapses whole gro… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/ribbon-collapse.json` |
| ribbon | registry:ui | Fluent 2-styled, Office-like Ribbon — the kit's flagship composite, with two layouts from one tree. **single-line** (Word's 'Faixa de Opções de Linha Única') c… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/ribbon.json` |
| select | registry:ui | Fluent 2-styled select (dropdown listbox) with shadcn APIs. Built on @base-ui/react's Select for portalled positioning, focus management, keyboard navigation a… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/select.json` |
| separator | registry:ui | Fluent 2-styled 1px divider with shadcn APIs. Horizontal or vertical orientation, decorative by default with native WAI-ARIA separator semantics when set to no… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/separator.json` |
| skeleton | registry:ui | Fluent 2-styled loading placeholder: a pulsing bg-accent block with rounded-md corners, resized/reshaped via className (line, avatar circle, card block). | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/skeleton.json` |
| spinner | registry:ui | Fluent 2-styled loading indicator: a rotating brand-colored arc (not a full ring) over an optional faint track, four sizes, and an optional visible label that … | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/spinner.json` |
| split-button | registry:ui | Fluent 2-styled split button with shadcn-style APIs. Three composable parts (SplitButton, SplitButtonAction, SplitButtonTrigger) join a primary command to an i… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/split-button.json` |
| switch | registry:ui | Fluent 2-styled on/off toggle with shadcn APIs. Built on @base-ui/react's Switch primitive for real form participation, keyboard behavior, and label associatio… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/switch.json` |
| tabs | registry:ui | Fluent 2-styled tabs with shadcn APIs. Built on @base-ui/react's Tabs for roving-tabindex keyboard navigation and a layout-measured sliding active-tab indicato… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/tabs.json` |
| textarea | registry:ui | Fluent 2-styled multi-line text field with shadcn APIs. Grows with content (field-sizing-content) and shares the signature Fluent bottom brand accent on focus … | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/textarea.json` |
| theme | registry:theme | The Fluent 2-inspired design token layer for @graundtech/fluent2-react-kit: light, dark, and high-contrast CSS custom properties plus a Tailwind v4 @theme brid… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/theme.json` |
| toast | registry:ui | Fluent 2-styled, shadcn-API toast notifications on Base UI's toast manager. A Provider + portalled Viewport with a stacked, swipeable, auto-dismissing toast su… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/toast.json` |
| toggle | registry:ui | Fluent 2-styled toggle button with shadcn APIs. Two variants (default, outline) and three sizes matching Button's height scale, aria-pressed/data-pressed state… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/toggle.json` |
| toolbar | registry:ui | Fluent 2-styled toolbar part family built on @base-ui/react's Toolbar for a single tab stop, roving-tabindex arrow-key navigation, and composite focus. Six par… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/toolbar.json` |
| tooltip | registry:ui | Fluent 2-styled tooltip with shadcn APIs. Built on @base-ui/react's Tooltip for hover/focus delay, portalled positioning and dismiss-on-Escape; the flyout is a… | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/tooltip.json` |
| utils | registry:lib | Class name helper that composes clsx and tailwind-merge for conflict-free Tailwind class composition. The canonical shadcn-style cn() utility. | `npx shadcn@latest add https://fluent2-react-kit.graund.io/r/utils.json` |

## For AI agents

```text
You are adding components from @fluent2-react-kit to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/fluent2-react-kit.md) for the component list.
2. Fetch the machine-readable index: https://fluent2-react-kit.graund.io/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: fluent2-react-kit).
```