Animated Tabs

A tab switcher where the active underline glides smoothly between tabs using a shared layout animation, paired with a subtle crossfade on the content panel.

animated-tabs-underline-preview

A quick summary view with the key numbers you care about, front and center.

Why it helps: A sliding underline reads as more polished than a hard state swap. Built on the same layoutId pattern already used elsewhere in this codebase, so it drops in consistently.

Source

components/live/AnimatedTabsUnderline.tsx

Usage

example.tsx

Props

className

string

Optional CSS class for root container

tabs

Tab[]

Array of tab objects with key, label, and content

defaultActiveKey

string

Key of the initially active tab

springConfig

{ stiffness: number; damping: number }

Framer Motion spring configuration for underline animation