Tabs

Tabbed content navigation. Built on Radix Tabs.

Overview content.

Import

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@aspect/react';

Usage

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="settings">...</TabsContent>
</Tabs>

Controlled

const [tab, setTab] = useState('overview');
<Tabs value={tab} onValueChange={setTab}>
  ...
</Tabs>;

Guidelines

Do:

Use for switching between views of the same content
Keep tab labels short (1-2 words)

Don't:

Don't use tabs for sequential steps — use a wizard or stepper
Don't use more than 6-7 tabs without an overflow strategy