Animated Tabs

A tab component with a moving active pill and directional content transitions.

interactivemotionanimationtabsaccessibility

The agent reads the request, studies the context, and turns scattered ideas into a clear direction your team can actually execute.

Installation

$npx shadcn@latest add https://ui.navdeepsingh.dev/r/animated-tabs.json

Prop	Type	Default	Description
`items`	`AnimatedTabItem[]`	`-`	Tabs to render. Each item is { value, label, content }, where content is any React node.
`defaultValue`	`string`	`-`	value of the tab selected on first render. Defaults to the first tab.
`className`	`string`	`-`	Classes merged onto the outer wrapper.
`listClassName`	`string`	`-`	Classes merged onto the tab list (the pill track).
`triggerClassName`	`string`	`-`	Classes merged onto each tab trigger button.
`contentClassName`	`string`	`-`	Classes merged onto the content panel wrapper.

Pass className to restyle the component. Classes are merged with cn, so your utilities win.
Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
Tune behavior with the props in the API reference above, for example items.