Animated Tabs

Use Animated Tabs to switch between related views in the same part of a page. It provides keyboard navigation, disabled items, controlled state, and a shared hover indicator for pointer input.

Preview

Reduce motion:Off

Tune:Off

Inspect

Installation

Base UI Motion

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

Basic usage

account-tabs.tsx

import AnimatedTabs from "@/components/ui/animated-tabs/animated-tabs";
 
const tabs = [
{ value: "profile", title: "Profile" },
{ value: "security", title: "Security" },
{ value: "billing", title: "Billing" },
];
 
export function AccountTabs() {
return <AnimatedTabs tabs={tabs} defaultValue="profile" />;
}

Examples

Controlled state

Use value and onValueChange when the selected view is also represented in page state or the URL.

Disabled tabs

Disable a tab only when its destination is unavailable. Keep the label visible so people understand what will become available.

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} />;
}

API

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.

Accessibility

Animated Tabs uses Base UI tab semantics and roving keyboard focus. The hover indicator is limited to pointer input, so keyboard navigation does not imply a hover state.

Styling

Override the root, list, active item, and indicator classes to match the surrounding navigation. Reduced-motion preferences simplify the indicator transition.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.

Was this page helpful?

Your response helps us improve component docs.