Tabs

Related views on the same page. The indicator follows the active tab, and panels fade in from the direction you came from.

Default

Pass defaultValue to select the initial tab. Drop Tabs.Indicator inside Tabs.List and it tracks the active tab.

Mission elapsed time: 14 days, 6 hours, 42 minutes. All nominal.

import { Tabs } from "@/components/ui/tabs"

export default function Example() {
  return (
    <Tabs.Root defaultValue="flight" className="w-full max-w-sm">
      <Tabs.List>
        <Tabs.Tab value="flight">Flight Log</Tabs.Tab>
        <Tabs.Tab value="systems">Systems</Tabs.Tab>
        <Tabs.Tab value="crew">Crew</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="flight">
        Mission elapsed time: 14 days, 6 hours, 42 minutes. All nominal.
      </Tabs.Panel>
      <Tabs.Panel value="systems">
        Oxygen: 98% · Power: 94% · Thermal: nominal · Propulsion: standby.
      </Tabs.Panel>
      <Tabs.Panel value="crew">
        3 crew members active. Sleep cycles staggered. Morale: high.
      </Tabs.Panel>
    </Tabs.Root>
  )
}

Anatomy

Tabs.List holds the triggers. Each Tabs.Panel matches a tab value.

import { Tabs } from "@/components/ui/tabs"

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab value="…" />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value="…" />
</Tabs.Root>

Disabled

Set disabled on a Tabs.Tab to prevent activation while keeping the label visible.

Mission elapsed time: 14 days, 6 hours, 42 minutes. All nominal.

import { Tabs } from "@/components/ui/tabs"

export default function Example() {
  return (
    <Tabs.Root defaultValue="flight" className="w-full max-w-sm">
      <Tabs.List>
        <Tabs.Tab value="flight">Flight Log</Tabs.Tab>
        <Tabs.Tab value="classified" disabled>Classified</Tabs.Tab>
        <Tabs.Tab value="crew">Crew</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="flight">
        Mission elapsed time: 14 days, 6 hours, 42 minutes. All nominal.
      </Tabs.Panel>
      <Tabs.Panel value="crew">
        3 crew members active. Sleep cycles staggered. Morale: high.
      </Tabs.Panel>
    </Tabs.Root>
  )
}

Props

Tabs.Root

Prop	Type	Default
defaultValue	Tabs.Tab.Value	0
value	Tabs.Tab.Value	—
onValueChange	(value, eventDetails) => void	—
orientation	"horizontal" \| "vertical"	"horizontal"

Tabs.Tab

Prop	Type	Default
value*	Tabs.Tab.Value	—
disabled	boolean	false

Tabs.Panel

Prop	Type	Default
value*	Tabs.Tab.Value	—
keepMounted	boolean	false

Tabs.Indicator

Prop	Type	Default
renderBeforeHydration	boolean	false

This covers the parts used above. See the Base UI Tabs docs for render, activateOnFocus, loopFocus, event details, CSS variables and data attributes.