Tabs

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/tabs

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components cn

Anatomy

import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs"

<Tabs aria-label="Recipe App">
  <TabList>
    <Tab id="i">Ingredients</Tab>
    <Tab id="m">Meal Plans</Tab>
  </TabList>
  <TabPanel id="i">
    Check the list of ingredients needed for your chosen recipes.
  </TabPanel>
  <TabPanel id="m">
    Discover curated meal plans to simplify your weekly cooking.
  </TabPanel>
</Tabs>

Examples

With icons

Add icons alongside tab labels.

Orientation

You can set the orientation of the tabs to either horizontal or vertical.

Links

Tabs can also be used as navigational links. Add the href prop to a Tab to render it as a link and navigate to the provided URL when selected.

When using a framework-specific link component, integrate it through your client-side routing setup. Learn more in Client Side Routing.

Adding href also applies the pointer cursor automatically, making the tab behave like an interactive navigation item.

Disabled

You can disable all tabs by setting the isDisabled prop to true.

You can also disable individual tabs by setting the isDisabled prop for each one, like this:

<Tab isDisabled id="c">Contact</Tab>
<Tab isDisabled id="a">About Us</Tab>

Component API

Tab

TabList

TabPanel

TabPanels

Tabs

TabScrollArea