Tabs

The Tabs component provides a way to organize content into separate views where only one view is visible at a time. Each tab’s content is rendered when that tab is selected.

Usage

<Tabs>
    <Tab label="Profile">
        <h3>Profile Settings</h3>
        <p>Manage your profile information here.</p>
    </Tab>
    
    <Tab label="Security">
        <h3>Security Settings</h3>
        <p>Update your password and security preferences.</p>
    </Tab>
    
    <Tab label="Notifications">
        <h3>Notification Preferences</h3>
        <p>Choose what notifications you want to receive.</p>
    </Tab>
</Tabs>

Features

• Accessible: Fully keyboard navigable with proper ARIA attributes
• Responsive: Adapts to different screen sizes
• Customizable: Multiple variants and sizes available
• Animated: Smooth transitions between tab panels
• Type-safe: Written in TypeScript

Props

Tabs Component

Prop	Type	Default	Description
defaultTab	number	0	The index of the tab to show by default
variant	'underlined' \| 'pills' \| 'cards'	'underlined'	The visual style of the tabs
size	'sm' \| 'md' \| 'lg'	'md'	The size of the tabs

Tab Component

Prop	Type	Required	Description
label	string	Yes	The text label for the tab
children	Snippet	Yes	The content to display when the tab is selected

Variants

Underlined (Default)

The default style with an underline indicator for the active tab.

<Tabs variant="underlined">
    <Tab label="Tab 1">Content 1</Tab>
    <Tab label="Tab 2">Content 2</Tab>
</Tabs>

Pills

A pill-style variant where tabs appear as rounded buttons.

<Tabs variant="pills">
    <Tab label="Tab 1">Content 1</Tab>
    <Tab label="Tab 2">Content 2</Tab>
</Tabs>

Cards

A card-style variant where tabs appear as connected cards.

<Tabs variant="cards">
    <Tab label="Tab 1">Content 1</Tab>
    <Tab label="Tab 2">Content 2</Tab>
</Tabs>

Sizes

The Tabs component supports three sizes:

• sm: Small tabs with reduced padding
• md: Medium tabs (default)
• lg: Large tabs with increased padding

<Tabs size="sm">
    <Tab label="Small">Content</Tab>
</Tabs>

<Tabs size="md">
    <Tab label="Medium">Content</Tab>
</Tabs>

<Tabs size="lg">
    <Tab label="Large">Content</Tab>
</Tabs>

Keyboard Navigation

The Tabs component supports the following keyboard interactions:

• ArrowLeft: Move to the previous tab
• ArrowRight: Move to the next tab
• Home: Move to the first tab
• End: Move to the last tab
• Space or Enter: Select the focused tab

Accessibility

The Tabs component follows WAI-ARIA best practices:

• Uses proper ARIA roles (tablist, tab, tabpanel)
• Manages focus appropriately
• Provides keyboard navigation
• Maintains proper ARIA attributes for selected states
• Supports screen readers with appropriate labels and descriptions

Examples

Basic Usage

<Tabs>
    <Tab label="Account">
        <h3>Account Settings</h3>
        <p>Manage your account preferences.</p>
    </Tab>
    <Tab label="Profile">
        <h3>Profile Information</h3>
        <p>Update your profile details.</p>
    </Tab>
</Tabs>

With Custom Styling

<Tabs variant="pills" size="lg">
    <Tab label="Overview">
        <Card>
            <h3>Overview</h3>
            <p>General information and statistics.</p>
        </Card>
    </Tab>
    <Tab label="Details">
        <Card>
            <h3>Details</h3>
            <p>Detailed information and settings.</p>
        </Card>
    </Tab>
</Tabs>

With Default Tab

<Tabs defaultTab={1}>
    <Tab label="First">First tab content</Tab>
    <Tab label="Second">Second tab content</Tab>
    <Tab label="Third">Third tab content</Tab>
</Tabs>

Best Practices

1. Keep Labels Clear and Concise

   • Use short, descriptive labels
   • Avoid long text that might wrap or truncate

2. Organize Related Content

   • Group related information into logical tabs
   • Maintain a consistent order across similar interfaces

3. Consider Mobile Experience

   • Test tab navigation on mobile devices
   • Ensure touch targets are large enough

4. Accessibility

   • Always provide meaningful labels
   • Test keyboard navigation
   • Ensure sufficient color contrast

5. Performance

   • Keep tab content lightweight
   • Consider lazy loading for complex content
   • Avoid deeply nested tabs