---
title: Tabs
category: General
summary: A single content area with multiple panels, each associated with a header in a list.
---

```jsx live
const { Tab, TabList, TabPanel, TabPanels } = Tabs
const tabs = [1, 2, 3, 4]
render(
  <Tabs>
    <TabList minWidth={60}>
      {tabs.map((tab, index) => (
        <Tab key={tab} disabled={index === 2}>
          Tab {tab}
        </Tab>
      ))}
    </TabList>
    <TabPanels>
      {tabs.map((tab) => (
        <TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </TabPanel>
      ))}
    </TabPanels>
  </Tabs>
)
```

```jsx live
const { Tab, TabList, TabPanel, TabPanels } = Tabs
const tabs = [1, 2, 3, 4]
render(
  <Card as={Tabs} axis="horizontal">
    <TabList axis="vertical" distribution="start" minWidth={20}>
      {tabs.map((tab) => (
        <Tab key={tab}>Tab {tab}</Tab>
      ))}
    </TabList>
    <TabPanels>
      {tabs.map((tab) => (
        <TabPanel key={tab} padding={2}>
          Content for tab {tab}
        </TabPanel>
      ))}
    </TabPanels>
  </Card>
)
```