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