Components/Tabs
Tabs
Animated tab panels for switching between related views. Three built-in style variants, keyboard navigation, and spring-powered indicators.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@animui/ui"Basic
Summary of your account activity, recent events, and key metrics.
Variants
Use the variant prop to switch between underline, pill, and enclosed styles.
Underline style.
Pill style.
Enclosed style.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The tab that is active by default. |
variant | "underline" | "pill" | "enclosed" | "underline" | Visual style for the tab list and active indicator. |
children | React.ReactNode | — | TabsList and TabsContent elements. |
className | string | — | Additional classes for the wrapper. |
Accessibility
- ✓Follows the ARIA Tabs pattern with
role="tablist",role="tab",role="tabpanel". - ✓Arrow keys navigate between tabs;
Home/Endjump to first/last. - ✓Each tab has
aria-selectedand is linked to its panel viaaria-controls.