Motion Tabs

A tabbed story card with staged headings and animated navigation states.

motion

Click a tab to transition between stories. Use the left and right arrow keys while a tab is focused to move through the list.

Options you can pass to customize this component.

Prop
Type
Description
items*
MotionTabItem[]

Stories rendered as tabs and animated content panels.

value
string

Active tab value for controlled usage.

defaultValue
string

Initial active tab for uncontrolled usage. Defaults to the first item.

onValueChange
(value: string) => void

Called when the active tab changes.

surfaceColor
string

CSS color used for the card and active tab surfaces.

className
string

Additional classes merged onto the root section.

npx shadcn add amitgajare2/ariseui/motion-tabs
Motion Tabs

01 / Client Stories

ClientWins

Highlighting the top client wins