Tabs

Tabbed content organization

NavigationStable

Preview

Interactive preview of the Tabs component with different variants.

Manage your account settings and preferences.

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from 'apex-design-system';

Basic Usage

tsx
<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
    <TabsTrigger value="tab3">Tab 3</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
  <TabsContent value="tab3">Content 3</TabsContent>
</Tabs>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source