Components

Tabs

Compact view switching with automatic keyboard activation.

Pill tabs

The default treatment matches dense application headers. Each tab is a separate quiet control, so the list does not need a surrounding track or divider.

Assigned issues

tsx

import { Tabs } from "@karnstack/dowel";

<Tabs.Root defaultValue="assigned">
  <Tabs.List aria-label="Issue views">
    <Tabs.Tab value="assigned">Assigned</Tabs.Tab>
    <Tabs.Tab value="created">Created</Tabs.Tab>
    <Tabs.Tab value="subscribed">Subscribed</Tabs.Tab>
    <Tabs.Tab value="activity">Activity</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="assigned">Assigned issues</Tabs.Panel>
  <Tabs.Panel value="created">Created issues</Tabs.Panel>
  <Tabs.Panel value="subscribed">Subscribed issues</Tabs.Panel>
  <Tabs.Panel value="activity">Recent activity</Tabs.Panel>
</Tabs.Root>

Line tabs

Use the line treatment when tabs sit directly above related content. It marks only the active label and deliberately avoids a full-width divider.

Project overview

tsx

<Tabs.Root defaultValue="overview" variant="line">
  <Tabs.List aria-label="Project views">
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Tab value="activity">Activity</Tabs.Tab>
    <Tabs.Tab value="issues">Issues</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Project overview</Tabs.Panel>
  <Tabs.Panel value="activity">Project activity</Tabs.Panel>
  <Tabs.Panel value="issues">Project issues</Tabs.Panel>
</Tabs.Root>

Arrow keys move and activate in one step. Home and End jump across the list. Tab moves from the active label into the active panel. Disabled tabs can receive focus so their presence is discoverable, but they cannot activate.

Pill tabs

Line tabs

Keyboard