Tabs pill

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 TabsPill component is a Base UI component.

<Tabs defaultValue="cat">
  <TabsPillList>
    <TabsPillTab value="cat">🐱 Cat</TabsPillTab>
    <TabsPillTab value="fox">🦊 Fox</TabsPillTab>
    <TabsPillTab value="lion">🦁 Lion</TabsPillTab>
    <TabsPillTab value="dog">🐶 Dog</TabsPillTab>
    <TabsPillTab value="tiger">🐯 Tiger</TabsPillTab>
    <TabsPillTab value="panda">🐼 Panda</TabsPillTab>
    <TabsPillTab value="koala">🐨 Koala</TabsPillTab>
    <TabsPillTab value="monkey">🐵 Monkey</TabsPillTab>
    <TabsPillTab value="frog">🐸 Frog</TabsPillTab>
  </TabsPillList>
  <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>