Animated Tabs

New

Tabs whose indicator glides between items on a spring. Pill or underline, keyboard friendly.

motionutils

Variants

Installation

$ pnpm dlx shadcn@latest add @soultel/animated-tabs

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/animated-tabs.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/animated-tabs.tsx.

Usage

example.tsx5 lines

import { AnimatedTabs } from "@/components/animated-tabs"

export function Example() {
  return <AnimatedTabs tabs={["Overview", "Usage", "Billing"]} />
}

Props

Prop	Type	Default	Description
tabs	string[]	-	Tab labels.
value / defaultValue	string	-	Controlled or initial active tab.
onValueChange	(value: string) => void	-	Called when the tab changes.
variant	"pill" \| "underline"	"pill"	Indicator style.