Underline variant
This is the overview tab content. Smooth underline indicator animates between tabs.
Pill variant
Analytics content goes here. The tab indicator uses Framer Motion layoutId.
Installation
Usage
import { FluidTabs } from "@/components/pioneerui/fluid-tabs"
const tabs = [
{ value: "overview", label: "Overview", content: <div>Overview content</div> },
{ value: "settings", label: "Settings", content: <div>Settings content</div> },
]
export default function Dashboard() {
return <FluidTabs tabs={tabs} defaultValue="overview" variant="underline" />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | FluidTabItem[] | — | Array of tab objects (required) |
defaultValue | string | first tab | Initially selected tab |
variant | underline | pill | underline | Indicator style |
onChange | (value: string) => void | undefined | Change callback |
listClassName | string | undefined | Additional class for tab list |
contentClassName | string | undefined | Additional class for content area |