Quick Links

Tabs

Set of content sections to be displayed one at a time.

Make changes to your account.

 <Tabs.Root defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
  </Tabs.List>

  <Box pt="3">
    <Tabs.Content value="account">
      <Text size="2">Make changes to your account.</Text>
    </Tabs.Content>

    <Tabs.Content value="documents">
      <Text size="2">Access and update your documents.</Text>
    </Tabs.Content>

    <Tabs.Content value="settings">
      <Text size="2">Edit your profile or update contact information.</Text>
    </Tabs.Content>
  </Box>
</Tabs.Root>

API Reference

This component inherits props from the Tabs primitive and supports [common margin props](It supports common margin props.

Root

Contains all component parts.

Prop	Type	Default
`asChild`	`boolean`	`false`

List

Contains the triggers that sit alongside the active content.

Prop	Type	Default
`size`	`"1" \| "2"`	`"2"`
`wrap`	`"wrap" \| "nowrap" \| "wrap-reverse"`
`justify`	`"start" \| "center" \| "end"`
`color`	`"gray" \| "purple"`
`highContrast`	`boolean`

Trigger

The button that activates its associated content.

Content

Contains the content associated with each trigger.

Examples

Size

Use the size prop to control the size of the tab list.

 <Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List size="1">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List size="2">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

Color

Use the color prop to assign a specific color to the tab list.

 <Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List color="purple">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List color="gray">
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

High-contrast

Use the highContrast prop to increase color contrast with the background.

 <Flex direction="column" gap="4" pb="2">
  <Tabs.Root defaultValue="account">
    <Tabs.List>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>

  <Tabs.Root defaultValue="account">
    <Tabs.List highContrast>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="documents">Documents</Tabs.Trigger>
      <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    </Tabs.List>
  </Tabs.Root>
</Flex>

Tabs should not be used for page navigation. Use Tab Nav instead, which is designed for this purpose and has equivalent styles.