Animated Tabs

Tab bar with a sliding pill that morphs between active tabs using layout animation.

UniqueUI CLI

npx uniqueui add animated-tabs

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/animated-tabs.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Build stunning interfaces with our design system. Every component is crafted with attention to detail.

Usage

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

export default function Example() {
  return (
    <div className="max-w-md mx-auto p-10">
      <AnimatedTabs
        tabs={[
          {
            id: "design",
            label: "Design",
            content: (
              <div className="p-4 rounded-lg bg-neutral-900/50 border border-neutral-800 text-neutral-300 text-sm">
                Build stunning interfaces with our design system. Every component is crafted with
                attention to detail.
              </div>
            ),
          },
          {
            id: "animate",
            label: "Animate",
            content: (
              <div className="p-4 rounded-lg bg-neutral-900/50 border border-neutral-800 text-neutral-300 text-sm">
                Add life to your UI with spring-physics animations powered by Motion.dev.
              </div>
            ),
          },
          {
            id: "ship",
            label: "Ship",
            content: (
              <div className="p-4 rounded-lg bg-neutral-900/50 border border-neutral-800 text-neutral-300 text-sm">
                Deploy with confidence. All components are production-ready and accessible.
              </div>
            ),
          },
        ]}
      />
    </div>
  );
}

Props

Prop	Type	Description
`tabs`	`{ id: string; label: string; content?: React.ReactNode }[]`	Array of tab configs. Each item has an id (used for layout animation and onChange), a label rendered on the button, and optional content shown when that tab is selected.
`className`	`string`	Tailwind classes merged onto the outer tabs container.
`tabClassName`	`string`	Classes applied to each tab button.
`activeTabClassName`	`string`	Additional classes applied to the currently active tab button.
`contentClassName`	`string`	Classes applied to the content wrapper rendered below the tab bar.
`onChange`	`(id: string) => void`	Called when the active tab changes, receiving the newly selected tab id.
`theme`	`"light" \| "dark"`	Color theme for the tab bar and content surfaces.