Animated Tabs

A single-card tab control with spring-eased indicator and smooth panel transitions.

animated-tabs

0px

Customize

Edit props; preview updates instantly.

Customize

Animate

Props

Props accepted by AnimatedTabs.

Prop	Type	Default	Description
tabs	AnimatedTab[]	—	Array of `{ value, label, content }`. Order defines slide direction.
defaultValue	string	tabs[0].value	Initially selected tab `value`. Uncontrolled — ignored if `value` is set.
value	string	—	Selected tab `value`. Controlled mode; pair with `onValueChange`.
onValueChange	(value: string) => void	—	Fires whenever the active tab changes (controlled or not).
animate	"basic" \| "blur"	"basic"	Transition mode. `basic` = carousel slide; `blur` = stacked crossfade with soft blur on the outgoing half.
className	string	—	Extra class names merged onto the root card.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/animated-tabs.json

Usage

Import the component and drop it into a render.

demo.tsx21 lines

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

export function Demo() {
  return (
    <AnimatedTabs
      defaultValue="preview"
      tabs={[
        {
          value: "preview",
          label: "Preview",
          content: <div className="p-8 text-sm text-neutral-300">Preview content</div>,
        },
        {
          value: "code",
          label: "Code",
          content: <pre className="p-4 text-xs">{`<Button />`}</pre>,
        },
      ]}
    />
  );
}

Credits

React useSyncExternalStoreSSR-safe state subscription for the active tab.ResizeObserverMeasures panel height for smooth stage transitions.