← All components
Navigation / component
Fluid Tabs
A tactile sliding pill with spring movement, keyboard navigation and persistent content panels.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- Adapted from Animata’s MIT-licensed Fluid Tabs, preserving the spring stiffness 380, damping 34, mass 0.75 and the original label easing.
- Compose FluidTabs.Root, List, Tab, Icon, Label and Panel. Place one List and any Panels directly inside Root; place Tabs directly inside List. Panels use zero-based index props and remain mounted while hidden.
- Arrow keys move focus, skipping disabled tabs. Home/End select the first/last focus target; Enter or Space activates. Tabs use manual activation, unique IDs and linked tab panels.
- Pause and reduced motion remove spring transitions while navigation stays functional. The primitive’s replayToken preserves selection and panel state. Gallery Replay resets the whole demo to its chosen starting tab.
- The Starting tab control changes the demo’s initial selection. Clicking a tab manages local selection. Demo settings are local inputs with no service integration.
- The reusable source uses the project’s existing framer-motion package rather than the equivalent motion/react import. CSS is bundled; Tailwind is not required.
React 19.2Modern browsers
Animata · MIT. See bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultActiveIndex | number | 0 | Initial uncontrolled selection; invalid or disabled indices fall back to the first enabled tab. |
activeIndex | number | undefined | Controlled selection. Update in onActiveIndexChange to accept a requested change. |
onActiveIndexChange | (index: number) => void | undefined | Reports a requested enabled selection. |
theme | 'light' | 'dark' | 'light' | Surface palette. |
children (required) | ReactNode | — | One direct List containing Tabs, followed by optional direct Panels with matching index props. |
paused | boolean | false | Stop decorative motion while keeping content usable. |
replayToken | number | 0 | Change to reset decorative motion without remounting primitive children. |