Help

Tabs

A component that displays tabbed content.

In this guide, you'll learn how to use the Tabs component.

At ACME, we're dedicated to providing you with an exceptional shopping experience. Our wide selection of products caters to your every need, from fashion to electronics and beyond. We take pride in our commitment to quality, customer satisfaction, and timely delivery. Our friendly customer support team is here to assist you with any inquiries or concerns you may have. Thank you for choosing ACME as your trusted online shopping destination.

Use the left and right arrow keys to navigate between the tabs. You must focus on a tab first.

Was this example helpful?

Usage#

Code
import { Tabs } from "@medusajs/ui"

Code
1<Tabs>2  <Tabs.List>3    <Tabs.Trigger value="1">Tab 1</Tabs.Trigger>4    <Tabs.Trigger value="2">Tab 2</Tabs.Trigger>5    <Tabs.Trigger value="3">Tab 3</Tabs.Trigger>6  </Tabs.List>7  <Tabs.Content value="1">Panel 1</Tabs.Content>8  <Tabs.Content value="2">Panel 2</Tabs.Content>9  <Tabs.Content value="3">Panel 3</Tabs.Content>10</Tabs>

API Reference#

This component is based on the Radix UI Tabs primitves

Was this helpful?

Examples#

Controlled Tabs#

This is the General tab (controlled).

Use the left and right arrow keys to navigate between the tabs. You must focus on a tab first.

Was this example helpful?

Tabs with a Disabled Tab#

This is the General tab.

Use the left and right arrow keys to navigate between the tabs. You must focus on a tab first.

Was this example helpful?

Tabs with Icons#

This is the General tab with an icon.

Use the left and right arrow keys to navigate between the tabs. You must focus on a tab first.

Was this example helpful?

Vertical Tabs#

The orientation prop doesn't change the layout of the tabs, but it allows you to navigate between the tabs using the up and down arrow keys. You'll need to manually style the tabs vertically.

This is the General tab (vertical).

Use the up and down arrow keys to navigate between the tabs. You must focus on a tab first.

Was this guide helpful?

Prop	Type	Default
`activationMode`	`"manual"` \|`"automatic"`	-
`defaultValue`	`string`	-
`dir`	`Direction`	-
`onValueChange`	`function`	-
`orientation`	`"horizontal"` \|`"vertical"`	-
`value`	`string`	-

Prop	Type	Default
`activationMode`	`"manual"` \|`"automatic"`	-
`defaultValue`	`string`	-
`dir`	`Direction`	-
`onValueChange`	`function`	-
`orientation`	`"horizontal"` \|`"vertical"`	-
`value`	`string`	-