Animated Tabs Component

AnimatedTabs is an accessible horizontal tab selector built on Base UI, with controlled and uncontrolled state, keyboard navigation, disabled items, and a pointer-only shared hover indicator.

Features

Accessible foundation: Base UI provides roving focus and horizontal keyboard navigation.
Controlled or uncontrolled: Use value or defaultValue depending on your state model.
Pointer-aware motion: The shared hover indicator does not animate keyboard-initiated navigation.
Customizable: Override active, indicator, root, and list classes.
Reduced motion: Uses the shared Sona reduced-motion transition.

Playground

Controls

Active tab

Installation

npx shadcn@latest add @sona-ui/animated-tabs

Usage


const tabs = [
  { value: "home", title: "Home" },
  { value: "profile", title: "Profile" },
  { value: "settings", title: "Settings" },
  { value: "help", title: "Help" },
  { value: "about", title: "About" },
];
 
export default function AnimatedTabsExample() {
  return <AnimatedTabs tabs={tabs} />;
}

Props

Property	Type	Default	Description
`tabs`	`AnimatedTabItem[]`	`required`	Tabs displayed in the horizontal tab list.
`value`	`string`	`—`	Controlled active tab value.
`defaultValue`	`string`	`—`	Initially active tab for uncontrolled usage.
`onValueChange`	`(value: string) => void`	`—`	Called when the active tab changes.
`ariaLabel`	`string`	`"Tabs"`	Accessible label for the tab list.
`indicatorClassName`	`string`	`"bg-accent"`	Background class for the shared active indicator.
`activeTabClassName`	`string`	`"bg-muted"`	Background class for the active tab.
`className`	`string`	`—`	Additional classes for the root container.
`listClassName`	`string`	`—`	Additional classes for the tab list.