Tabs
ui
control
container
Content switching with tab navigation
Organize related content in separate panels
import { Tabs } from "@everydayos/ui";Usage
Simple tabbed interface
<Tabs defaultValue="account" className="w-full">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
</TabsList>
<TabsContent value="account">
<Stack spacing="md">
<Heading as="h3" size="m">Account Settings</Heading>
<Text variant="muted">Manage your account preferences</Text>
</Stack>
</TabsContent>
<TabsContent value="password">
<Stack spacing="md">
<Heading as="h3" size="m">Password</Heading>
<Text variant="muted">Change your password</Text>
</Stack>
</TabsContent>
<TabsContent value="settings">
<Stack spacing="md">
<Heading as="h3" size="m">Settings</Heading>
<Text variant="muted">Configure app settings</Text>
</Stack>
</TabsContent>
</Tabs>Composition
Pairs well with
Stack
Surface
When to avoid
- Need page navigation — use links instead
- Only 2 options — use toggle or switch instead