SubtleTab
Tab navigation with smooth pill animations.
Installation
npx shadcn@latest add https://fluid-functionalism.vercel.app/r/subtle-tab.jsonBasic
Teamspaces content goes here.
API Reference — SubtleTab
| Prop | Type | Default | Description |
|---|---|---|---|
| selectedIndex | number | — | Index of the currently selected tab. |
| onSelect | (index: number) => void | — | Called when a tab is selected. |
| idPrefix | string | — | Prefix for ARIA IDs linking tabs to panels. |
| children | ReactNode | — | SubtleTabItem children. |
API Reference — SubtleTabItem
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | LucideIcon | — | Icon displayed in the tab. |
| label | string | — | Text label for the tab. |
| index | number | — | Position index within the tab list. |
API Reference — SubtleTabPanel
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Index of this panel. |
| selectedIndex | number | — | Currently selected tab index. |
| idPrefix | string | — | Must match the SubtleTab idPrefix. |
| children | ReactNode | — | Panel content, only rendered when selected. |