Trending Society

Breadcrumb | UI components | Trending Society

More from @fluent2-react-kit, 34 components

All @fluent2-react-kit

Accordion component
@fluent2-react-kit
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 collapsible panel; the trigger rotates a ChevronDownRegular chevron and the panel animates height via Base UI's --accordion-panel-height CSS variable.
Layout1 registry dep · 2 packages
Alert component
@fluent2-react-kit
Fluent 2 MessageBar-styled alert with shadcn APIs. Three composable parts (Alert, AlertTitle, AlertDescription), five variants (default, destructive, success, warning, info) with subtle intent backgrounds, intent borders, and an optional icon slot.
Feedback1 registry dep · 1 package
Avatar component
@fluent2-react-kit
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 fallback while the image loads or if it fails.
Data display1 registry dep · 1 package
Badge component
@fluent2-react-kit
Fluent 2-styled badge with shadcn APIs. Six variants (default, secondary, destructive, outline, success, warning) as a compact pill, with icon support and asChild support.
Data display1 registry dep · 2 packages
Button component
@fluent2-react-kit
Fluent 2-styled button with shadcn APIs. Six variants (default, secondary, outline, ghost, destructive, link) and six sizes, brand state ramp, asChild support, and a Fluent double-stroke focus ring.
Buttons and actions1 registry dep · 2 packages
Card component
@fluent2-react-kit
Fluent 2-styled card with shadcn APIs. Seven composable parts (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter), Fluent resting elevation (shadow-4) and rounded-lg border.
Layout1 registry dep
Checkbox component
@fluent2-react-kit
Fluent 2-styled checkbox with shadcn APIs. Built on @base-ui/react's Checkbox primitive for real form participation and keyboard behavior; supports checked, unchecked, and indeterminate states with Fluent's checkmark/dash glyphs from @fluentui/react-icons.
Forms1 registry dep · 2 packages
Combobox component
@fluent2-react-kit
Fluent 2-styled filterable select with shadcn-style composable APIs. Built on @base-ui/react's Combobox for portalled positioning, focus management, keyboard navigation and built-in filtering; the field matches the kit's Input (bottom brand-accent focus, Clear + chevron), the flyout uses Fluent shadow-16 elevation, and selected/highlighted items use CheckmarkRegular + brand-neutral accent states. Passes Base UI's `multiple` prop through for a future Multi Select.
Forms1 registry dep · 2 packages
Command component
@fluent2-react-kit
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-visible, filtered list whose items fire actions (onClick, firing on click and Enter-when-highlighted) rather than persist a selection — Autocomplete's inline-open + selectionMode:'none' model. Includes a Command palette panel, a search input with a leading SearchRegular icon, filtered List/Empty, grouped items with headings, separators, shortcut hints, and a CommandDialog that wraps the kit Dialog.
Navigation2 registry deps · 2 packages
Dialog component
@fluent2-react-kit
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 dismissal; the popup is a centered bg-background surface with Fluent shadow-64 elevation and rounded-xl radius over a theme-invariant black/40 smoke backdrop, with a built-in DismissRegular close button.
Overlays1 registry dep · 2 packages
Dropdown Menu component
@fluent2-react-kit
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 submenus; the flyout matches the kit's Select surface (Fluent shadow-16 elevation, 32px rows) and check/radio indicators use CheckmarkRegular plus a filled-circle marker on brand-neutral accent states.
Overlays1 registry dep · 2 packages
Input component
@fluent2-react-kit
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 layout shift).
Forms1 registry dep

Breadcrumb

Install

Live preview

Registry dependencies1

Packages1

Breadcrumb

Install

Live preview

Registry dependencies1

Packages1

Source

More from @fluent2-react-kit, 34 components

The Signal

Install

Live preview

Registry dependencies1

Packages1

Install

Live preview

Registry dependencies1

Packages1

Source

More from @fluent2-react-kit34, 34 components

More from @fluent2-react-kit, 34 components