Tabs

A navigation component that switches structural content views without reloading by clicking button panes.
For more information on this component configuration, visit Radix UI

Tab one content

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Tab one content

Disabled Item

Use the disabled attr or the disabled class to disable an item component.

Sizes

Use the tabs-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Tab one content

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleghostplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-tabs-trigger-cursor: default;
 
  --ex-tabs-px-sm: calc(var(--spacing) * 2);
  --ex-tabs-px-md: calc(var(--spacing) * 3);
 
  --ex-tabs-py-sm: calc(var(--spacing) * 2);
  --ex-tabs-py-md: calc(var(--spacing) * 3);
 
  --ex-tabs-radius-sm: var(--radius-sm);
  --ex-tabs-radius-md: var(--radius-sm);
 
  --ex-tabs-trigger-font-family: var(--font-sans);
  --ex-tabs-trigger-font-weight: var(--font-weight-normal);
 
  --ex-tabs-trigger-font-size-sm: var(--text-xs);
  --ex-tabs-trigger-font-size-md: var(--text-sm);
 
  --ex-tabs-trigger-height-sm: calc(var(--spacing) * 9);
  --ex-tabs-trigger-height-md: calc(var(--spacing) * 10);
 
  --ex-tabs-trigger-gap-sm: calc(var(--spacing) * 1.75);
  --ex-tabs-trigger-gap-md: calc(var(--spacing) * 2);
 
  --ex-tabs-trigger-px-sm: calc(var(--spacing) * 3.5);
  --ex-tabs-trigger-px-md: calc(var(--spacing) * 4);
 
  --ex-tabs-trigger-radius-sm: var(--radius-sm);
  --ex-tabs-trigger-radius-md: var(--radius-sm);
}

API

For more information on this component configuration, visit Radix UI

Tabs

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`activationMode`	`enum of ["automatic", "manual"]`	`automatic`
`defaultValue`	`string`	`false`
`orientation`	`enum of ["horizontal", "vertical"]`	`horizontal`
`value`	`string`
`onValueChange`	`function`

Tabs List

Element	Selector
`Tabs.List`	`.ex-tabs-list`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`loop`	`boolean`	`true`

Tabs Trigger

Element	Selector
`Tabs.Trigger`	`.ex-tabs-trigger`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`value`	`string`

Tabs Content

Element	Selector
`Tabs.Content`	`.ex-tabs-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`false`
`value`	`string`

Tabs Section

Element	Selector
`ContextMenu.Section`	`.ex-tabs-body`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`