apsara

Documentation Examples

TabsA set of layered sections of content that display one panel at a time.

Radix UI API Reference

Preview

General settings content

Usage

The Tabs component provides a way to organize content into multiple sections, displaying one section at a time.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Tabs } from '@raystack/apsara/v1'

<Tabs.Root defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Tab One</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab Two</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">Tab one content</Tabs.Content>
  <Tabs.Content value="tab2">Tab two content</Tabs.Content>
</Tabs.Root>

Tabs Props

The Tabs component is composed of several parts, each with their own props:

Root Props

defaultValue: The initial active tab value. If not passed, no tab will be selected by default.
value: Controlled active tab value.
onValueChange: Callback when active tab changes.
className: Additional CSS class names.

List Props

className: Additional CSS class names

Trigger Props

value: Unique identifier for the tab (required)
icon: Optional icon element to display
disabled: Whether the tab is disabled
className: Additional CSS class names

Content Props

value: Matching identifier for the tab (required)
className: Additional CSS class names

Tabs follow the WAI-ARIA Tabs Pattern. They include the following accessibility features:

Keyboard navigation between tabs using arrow keys
Proper ARIA roles, states, and properties
Focus management for tab panels