Components

Tabs

Switch between sibling views of the same subject. Use line variant when tabs sit against a page header, default when they sit inside a surface.

When to usewhen the same subject has a few peer views (Brief / Log / Team) that share a header but not content.

Import

import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@ravnhq/efni/tabs"

Default

Objectives, waypoints, and current phase.

<Tabs defaultValue="brief">
  <TabsList>
    <TabsTrigger value="brief">Brief</TabsTrigger>
    <TabsTrigger value="log">Log</TabsTrigger>
  </TabsList>
  <TabsContent value="brief">…</TabsContent>
</Tabs>

Line variant

High-level summary.

<TabsList variant="line">…</TabsList>

Do & don't

Keep to 2–5 short labels — a single noun each.

Don't stuff sentences into tab labels — they'll wrap or overflow the list.

Accessibility

Key	Action
`← / →`	Move focus between triggers.
`Home / End`	Focus first / last trigger.
`Space / Enter`	Activate the focused trigger (unless activateOnFocus).

Triggers get role=tab, content gets role=tabpanel, and the pair is linked via aria-controls.
Set aria-label on Tabs when the surrounding heading doesn't already label the group.

Guidelines

Use the line variant when tabs sit under a page header.
Use the default variant inside cards or panels.
Persist the selected tab in the URL when the tab represents a real navigation state.

Don't

Don't hide primary actions behind tabs — the operator can't discover what's inside.
Don't scroll a TabsList — 3–5 triggers max, then rethink the shape.
Don't mix icons and text unevenly — either all triggers have icons or none.

Props

Prop	Type	Default	Description
`value`	`TabsTab.Value`	—	The value of the currently active `Tab`. Use when the component is controlled. When the value is `null`, no Tab will be active.
`defaultValue`	`TabsTab.Value`	`0`	The default value. Use when the component is not controlled. When the value is `null`, no Tab will be active.
`onValueChange`	`((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void)`	—	Callback invoked when new value is being set.
`TabsList.variant`	`"default" \| "line"`	`"default"`
`TabsTrigger.value`	`TabsTab.Value`	—	The value of the Tab.
`TabsContent.value`	`TabsTab.Value`	—	The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
`…props`	`TabsPrimitive.Root.Props`	—	Everything Tabs passes to the element it renders.