Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProRadix tabs with a pill or underline indicator that slides between triggers and panels that fade in.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import {
AnimatedTabs,
AnimatedTabsContent,
AnimatedTabsList,
AnimatedTabsTrigger,
} from "@/components/ui/animated-tabs"<AnimatedTabs defaultValue="overview" variant="underline">
<AnimatedTabsList aria-label="Project">
<AnimatedTabsTrigger value="overview">Overview</AnimatedTabsTrigger>
<AnimatedTabsTrigger value="activity">Activity</AnimatedTabsTrigger>
</AnimatedTabsList>
<AnimatedTabsContent value="overview">Overview panel</AnimatedTabsContent>
<AnimatedTabsContent value="activity">Activity panel</AnimatedTabsContent>
</AnimatedTabs>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "pill" | "underline" | "pill" | Indicator style. |
defaultValue | string | "" | Tab selected on first render when uncontrolled. |
value | string | - | Selected tab when controlled. |
onValueChange | (value: string) => void | - | Called when the selected tab changes. |
Also accepts all Radix Tabs.Root props.
Accepts all Radix Tabs.List props. Give it an aria-label.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Value of the panel this trigger opens. |
Also accepts all Radix Tabs.Trigger props.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Value that shows this panel. |
Also accepts all Radix Tabs.Content props.
aria-controls.layoutId, scoped per instance, so several tab sets on one page do not interfere.