Overflow

from @fluent2-react-kit
by graundtech <https://github.com/graundtech/fluent2-react-kit>

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 into a '…' overflow menu and restores them (highest-priority first) as it grows. Ships a framework-agnostic manager (createOverflowManager) plus React bindings: Overflow provider, OverflowItem, OverflowDivider, and the useOverflowMenu / useIsOverflowItemVisible / useIsOverflowGroupVisible / useOverflowCount hooks. ResizeObserver-driven, priority + pinned ranking with DOM-position tie-break, size caching, group tracking, and a referentially-stable subscribe/getSnapshot store built for useSyncExternalStore. SSR-safe (everything visible until measured) and headless (no styling of its own).

Install

New to shadcn? Set up your project

If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.

$pnpm dlx shadcn@latest init

Setup by framework · Configure a registry namespace

$pnpm dlx shadcn@latest add @fluent2-react-kit/overflow

Live preview

No live preview has been built for this component yet.

Registry dependencies0

The CLI adds no other registry items with this one.

Packages0

No npm packages are installed with it.

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
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

The Signal

Install

Live preview

Registry dependencies0

Packages0

Install

Live preview

Registry dependencies0

Packages0

Source

More from @fluent2-react-kit34, 34 components

More from @fluent2-react-kit, 34 components