Animated Tabs

Free

Tabs with a sliding indicator, panels that follow its direction and full keyboard support.

Mosswood Dashboard

Production · eu-west

Deploys

128

this month

Uptime

99.98%

30 days

p95

212 ms

API latency

Customize

Variant

Indicator#ff784f

Installation

npx shadcn@latest add https://ui.mekaigames.com/r/animated-tabs.json

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/animated-tabs.tsx.

Usage

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

<AnimatedTabs
  label="Project"
  tabs={[
    { id: "overview", label: "Overview", content: <Overview /> },
    { id: "activity", label: "Activity", content: <Activity /> },
    { id: "settings", label: "Settings", content: <Settings /> },
  ]}
  onChange={(id) => track("tab", id)}
/>

Props

9 properties

Property	Type	Default	Description
tabs	{ id, label, content, disabled? }[]	—	Tabs in order. Content is rendered only for the active tab.
defaultTab	string	—	Tab shown first when uncontrolled. Defaults to the first enabled tab.
value	string	—	Active tab id, for controlled use.
onChange	(id: string) => void	—	Called when the user picks another tab.
variant	"pill" \| "underline"	"pill"	A filled pill behind the label, or a line under it.
color	string	"#ff784f"	Color of the sliding indicator.
label	string	"Tabs"	Accessible name of the tab list.
className	string	—	Extra classes for the wrapper.
panelClassName	string	—	Extra classes for the panel area.

Dependencies: motion