Animated Tabs

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

Customize

Animate

Usage

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>,
        },
      ]}
    />
  );
}