Tabs

Animated tabs with sliding highlight indicator for React

The active indicator slides between tabs instead of just appearing. Content panels slide horizontally when switching, with inactive content getting a subtle blur. Works controlled or uncontrolled. Full keyboard navigation and accessibility.

Tabs preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/tabs.json

npx shadcn@latest add https://www.shadcn.io/r/tabs.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/tabs.json

bunx shadcn@latest add https://www.shadcn.io/r/tabs.json

Motion Highlight

Animated highlight effect

Dock

macOS-style dock

Limelight Nav

Spotlight navigation

Animated Modal

Animated modal dialog

FAQ

Was this page helpful?

Spinner

Loading spinner collection with 8 animated variants for React

Announcement

Pill-shaped announcement badge for product updates in React

Tabs

Tabs preview

Installation

Related Components

Motion Highlight

Dock

Limelight Nav

Animated Modal

FAQ

How do I adjust the animation speed?

Can I control it externally?

Can I turn off the blur on inactive content?

Is it accessible?