Tabs

Layout

A tabbed interface that switches between multiple content panels while keeping only one active at a time.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add tabs

Import the component directly from the package:

import { Tabs } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
value	string	Controlled active tab value.
onValueChange	(value: string) => void	Callback when active tab changes.
defaultValue	string	Default active tab value.
className	string	Additional CSS classes to apply.

Implements the WAI-ARIA Tabs pattern. Uses `role="tablist"`, `role="tab"`, `role="tabpanel"` with `aria-selected` and `aria-controls`.

AccordionVertically stacked interactive headings with reveal panels.

Aspect RatioContent-sized to a desired ratio.

CardBounded content container.

CarouselHorizontally scrolling item sets.

CollapsibleExpandable content sections.

Scroll AreaCustom styled scroll container.

SeparatorVisual content divider.