Animated Tabs

A tab list with a sliding indicator measured from the active trigger's own layout box, so it stays correct when labels change length or the container resizes.

Transitions

tabsindicatornavigation

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

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

export function Example() {
  return <AnimatedTabs />;
}

Install prerequisites

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge