 <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>

Props

Tabs.Root

`asChild`

boolean

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Tabs.List

`color`

rubygraygoldbronzebrownyellowamberorangetomatoredcrimsonpinkplumpurplevioletirisindigobluecyantealjadegreengrasslimemintsky

`highContrast`

boolean

`justify`

centerendstart

`size`

`wrap`

wrapnowrapwrap-reverse

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Tabs.Content

`asChild`

boolean

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Usage

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.

Variants

Dashboard

2 variants found

Tabs in Context Schema Documentationdashboard

Tabs in View Attributes Payloads Dialogdashboard

Context

Tabs.Root

Prop	Type	Default	Required
`asChild`	`boolean`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Tabs.List

Prop	Type	Default	Required
`color`	`"ruby" \| "gray" \| "gold" \| "bronze" \| "brown" \| "yellow" \| "amber" \| "orange" \| "tomato" \| "red" \| "crimson" \| "pink" \| "plum" \| "purple" \| "violet" \| "iris" \| "indigo" \| "blue" \| ... 8 more ...`	—	no
`highContrast`	`boolean`	—	no
`justify`	`Responsive<"center" \| "end" \| "start">`	—	no
`size`	`Responsive<"1" \| "2">`	—	no
`wrap`	`Responsive<"wrap" \| "nowrap" \| "wrap-reverse">`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Tabs.Content

Prop	Type	Default	Required
`asChild`	`boolean`	—	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

Usage

Used 49 times across 1 package

Dashboard

Where it's used

8 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx14

/code-editor

packages/dashboard/src/app/(private)/code-editor/demo.tsx7

packages/dashboard/src/components/configuration/custom-attributes/view-attributes-payloads-dialog.tsx6

packages/dashboard/src/components/test-sso/service-provider-initiated-content.tsx6

packages/dashboard/src/components/authentication/jwt-template/context-schema-documentation.tsx4

packages/dashboard/src/legacy-pages/[environmentId]/actions/test/index.tsx4

/:environmentId/roles-and-permissions/resource-types/edit/content-panel

packages/dashboard/src/app/(private)/(chromeless)/[environmentId]/roles-and-permissions/resource-types/edit/content-panel/create-resource-type-form.tsx4

packages/dashboard/src/app/(private)/(chromeless)/[environmentId]/roles-and-permissions/resource-types/edit/content-panel/resource-type-details-form.tsx4

Tabs

On this page

Props

Tabs.Root

`asChild`

Tabs.List

`color`

`highContrast`

`justify`

`size`

`wrap`

Tabs.Content

`asChild`

Usage

Size

Color

High-contrast

Navigation

Variants

Dashboard

Context

Full API Reference

Tabs.Root

Tabs.List

Tabs.Content

Usage Statistics

Usage

Where it's used