127 Components
Liquid Pill Tabs
NavigationSegmented navigation tab bar with dual-layer spring layout projection for active and hover indicator pills and roving WAI-ARIA keyboard control.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/liquid-pill-tabs.json"
Props
TypeScript props supported by <LiquidPillTabs />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | LiquidTabItem[] | — | Array of tab items containing id, label, and optional badge count. |
| defaultActiveTab | string | "preview" | Initial active tab ID for uncontrolled usage. |
| stiffness | number | 380 | Hooke's Law spring stiffness for active pill projection. |
| damping | number | 26 | Spring damping coefficient for active pill projection. |
| activeTab | string | — | Controlled identifier for the active tab |
| onChange | (tabId: string) => void | — | Callback fired when active tab selection changes |
Key Features
- Coupled dual-layer layoutId projection separating the magnetic hover ghost pill from the active selection pill.
- Unique instance-scoped layout IDs via React useId so multiple tab bars on the same page never collide.
- Roving tabIndex and arrow-key selection following WAI-ARIA Tabs Authoring Practices.
Keyboard & Accessibility
- Implements role='tablist' and role='tab' with aria-selected and roving tabIndex.
- Supports ArrowLeft, ArrowRight, Home, and End keys to cycle and activate tabs.
- Instantly snaps pill indicators without motion when prefers-reduced-motion is enabled.