Tabs underline

Last updated on March 25, 2026 at 5:50 PM

Tabs are a navigational component that allows users to move easily between groups of related content.

#Usage

The TabsUnderline component is a Base UI component.

<Tabs defaultValue="cat">
  <TabsUnderlineList>
    <TabsUnderlineTab value="cat">🐱 Cat</TabsUnderlineTab>
    <TabsUnderlineTab value="fox">🦊 Fox</TabsUnderlineTab>
    <TabsUnderlineTab value="lion">🦁 Lion</TabsUnderlineTab>
    <TabsUnderlineTab value="dog">🐶 Dog</TabsUnderlineTab>
    <TabsUnderlineTab value="tiger">🐯 Tiger</TabsUnderlineTab>
    <TabsUnderlineTab value="panda">🐼 Panda</TabsUnderlineTab>
    <TabsUnderlineTab value="koala">🐨 Koala</TabsUnderlineTab>
    <TabsUnderlineTab value="monkey">🐵 Monkey</TabsUnderlineTab>
    <TabsUnderlineTab value="frog">🐸 Frog</TabsUnderlineTab>
  </TabsUnderlineList>
  <Spacer height={16} />

  <TabsPanel value="cat">🐱 Cat</TabsPanel>
  <TabsPanel value="fox">🦊 Fox</TabsPanel>
  <TabsPanel value="lion">🦁 Lion</TabsPanel>
  <TabsPanel value="dog">🐶 Dog</TabsPanel>
  <TabsPanel value="tiger">🐯 Tiger</TabsPanel>
  <TabsPanel value="panda">🐼 Panda</TabsPanel>
  <TabsPanel value="koala">🐨 Koala</TabsPanel>
  <TabsPanel value="monkey">🐵 Monkey</TabsPanel>
  <TabsPanel value="frog">🐸 Frog</TabsPanel>
</Tabs>