Tabs

Basic

Tabs divide content into sections, allowing users to easily switch between them.

Installation

npx shadcn@latest add @intentui/tabs

Manual installation

npm i react-aria-components

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>

With icons

If you want to include icons in your tabs, it's simple to do. This tab setup handles icons smoothly, maintaining a clean design.

Orientation

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

Links

If you want to use tabs as navigational links, you can add the href prop to the Tab component. This will automatically change the cursor to a pointer.

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>