Animated Tabs

Tab bar with a springy shared-layout indicator and panels that slide and blur in the direction of travel.

This month

Revenue

$48.2k

+12.4%

Customers

2,391

+4.1%

Churn

1.8%

-0.3%

Open

variant

transition

bounce0.2

Installation

npx shadcn@latest add @glint-ui/animated-tabs

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/animated-tabs.json

Usage

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

<AnimatedTabs
  tabs={[
    { id: "overview", label: "Overview", content: <Overview /> },
    { id: "analytics", label: "Analytics", content: <Analytics /> },
  ]}
/>

Props

Prop	Type	Default	Description
tabs	ReactNode	—	Array of { id, label, icon?, content }.
variant	"pill" \| "underline"	"pill"	Indicator style.
transition	"slide" \| "fade"	"slide"	Panel enter/exit style.
bounce	number	0.2	Spring bounce of the indicator.
defaultTab	string	—	Id of the initially selected tab.
onChange	ReactNode	—	Called with the new tab id.
className	string	—	Extra classes for the root element.