Trending Society

Alert | 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
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
Breadcrumb component
@fluent2-react-kit
Fluent 2-styled breadcrumb with shadcn APIs. Seven composable parts (Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis), inline SVG chevron/ellipsis glyphs to stay a Server Component.
Navigation1 registry dep · 1 package
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

Alert

Install

Live preview

Registry dependencies1

Packages1

Alert

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