Lenso UI

Foundation component · Navigation

Tabs

A quiet local-view switcher with a compact variant for workspace navigation.

Live playground

Overview content

Choose Tabs when

  • Use tabs for peer views within one context, not for primary navigation.
  • Use the default underline treatment for local content views. Apply density="compact" to both List and Tab for a 32px workspace/header switcher with a quiet filled selection.
  • Keep labels short; the product shell handles horizontal overflow rather than shrinking tabs until they are unreadable.

Accessibility

  • Give every tab list an accessible name that describes the switched views.
  • Base UI owns roles, roving focus, arrow keys, selection, and panel linkage.

Implementation

Compact is an explicit workspace variant. The default uses a text label and selected rule for local content.

import { Tabs } from "@lenso/ui/tabs";

<Tabs.Root defaultValue="overview">
  <Tabs.List aria-label="Project sections" density="compact">
    <Tabs.Tab density="compact" value="overview">
      Overview
    </Tabs.Tab>
    <Tabs.Tab density="compact" value="documents">
      Documents
    </Tabs.Tab>
    <Tabs.Tab density="compact" value="members">
      Members
    </Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel value="overview">Overview content</Tabs.Panel>
</Tabs.Root>;
Lenso UI