AnimatedTabs

A tab switcher with a smoothly animated active indicator. Choose between an underline or pill variant and render your own content based on the selected tab.

Underline variant

A minimal underline glides beneath the active tab.

Pill variant

A rounded pill follows the active tab — great for segmented controls.

Usage

import { AnimatedTabs } from "@mantleui/react/motion";

const tabs = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },
  { id: "reports", label: "Reports" },
  { id: "settings", label: "Settings" },
];

// Underline
<AnimatedTabs tabs={tabs} defaultValue="overview" />

// Pill
<AnimatedTabs tabs={tabs} defaultValue="overview" variant="pill" />

// Controlled
<AnimatedTabs
  tabs={tabs}
  value={active}
  onValueChange={setActive}
/>

Props

Prop	Type	Default	Description
`tabs`	`AnimatedTabItem[]`	—	Tab definitions — each item is `{ id, label }`.
`value`	`string`	—	Controlled selected tab id.
`defaultValue`	`string`	—	Default selected tab id in uncontrolled mode.
`onValueChange`	`(value: string) => void`	—	Called whenever the selected tab changes.
`variant`	`"underline" \| "pill"`	`"underline"`	Visual style of the active indicator.

tabs

AnimatedTabItem[]

Tab definitions — each item is `{ id, label }`.

value

string

Controlled selected tab id.

defaultValue

string

Default selected tab id in uncontrolled mode.

onValueChange

(value: string) => void

Called whenever the selected tab changes.

variant"underline"

"underline" | "pill"

Visual style of the active indicator.