Animated Tabs

Tabs with a gliding pill and panels stacked like cards that peek behind.

Start from tokens, not pixels. Every colour and radius maps to a CSS variable you can re-theme later.

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/animated-tabs.json

Adds components/velora/animated-tabs.tsx, installs motion.

Four tabs of rich content, each with copy, a checklist and a mock UI.

Analytics

Live dashboards that update as events arrive — no nightly batch jobs.

Prop	Type	Default
`tabs*` The tabs, in order	`Tab[]`	`—`
`defaultValue` Value of the tab selected on first render (defaults to the first tab)	`string`	`—`
`value` Controlled selected value	`string`	`—`
`onValueChange` Called with the new value when the selection changes	`(value: string) => void`	`—`
`peek` How many inactive panels peek out behind the active one	`number`	`2`
`listClassName` Classes for the tab list	`string`	`—`
`panelClassName` Classes for every panel card	`string`	`—`

Also accepts every <div> attribute, forwarded to the root element.

interface Tab {
  title: React.ReactNode;
  value: string;
  content: React.ReactNode;
}

Reduced motion: The pill jumps to the selected tab and the panels swap places instantly; the stacked, offset layout stays as a static picture.
Keyboard: One Tab stop for the tab list (roving tabindex). Arrow Left/Right move and select with wrap-around, Home and End jump to the first and last tab, and Tab then moves into the active panel.
Screen readers: Uses tablist, tab and tabpanel roles with aria-selected, aria-controls and aria-labelledby; the peeking inactive panels are aria-hidden and inert.