ComponentsUpdated Sep 9, 2026

Tabs

Segmented tabs with a sliding indicator. Tabs stretch to fill the list, so keep labels short and the count small.

Import

Source: packages/ui/src/components/tabs

tsx

import { Tabs } from '@highlight/ui'

Basic

Three decisions, two open questions, one owner assigned.

tsx

import { Tabs } from '@highlight/ui'

export default function TabsBasic() {
  return (
    <Tabs defaultValue="summary" className="w-80 gap-3">
      <Tabs.List>
        <Tabs.Tab value="summary">Summary</Tabs.Tab>
        <Tabs.Tab value="transcript">Transcript</Tabs.Tab>
        <Tabs.Tab value="actions">Actions</Tabs.Tab>
      </Tabs.List>
      <Tabs.Panel value="summary" className="text-foreground/70 text-sm">
        Three decisions, two open questions, one owner assigned.
      </Tabs.Panel>
      <Tabs.Panel value="transcript" className="text-foreground/70 text-sm">
        42 minutes, 4 speakers.
      </Tabs.Panel>
      <Tabs.Panel value="actions" className="text-foreground/70 text-sm">
        Draft the launch checklist by Friday.
      </Tabs.Panel>
    </Tabs>
  )
}

Pending and disabled

isPending shows a spinner next to the label while that panel loads.

tsx

import { Tabs } from '@highlight/ui'

export default function TabsPending() {
  return (
    <Tabs defaultValue="notes" className="w-80">
      <Tabs.List>
        <Tabs.Tab value="notes">Notes</Tabs.Tab>
        <Tabs.Tab value="summary" isPending>
          Summary
        </Tabs.Tab>
        <Tabs.Tab value="share" disabled>
          Share
        </Tabs.Tab>
      </Tabs.List>
    </Tabs>
  )
}

Parts

Compound sub-components. Every part accepts className and forwards the rest of its props to Base UI.

Tabs.List: The rail with the sliding Indicator. indicatorClassName styles the indicator.
Tabs.Tab: One tab; value matches a Panel. isPending adds a spinner.
Tabs.Panel: Content for a value.