Components

Tabs

Switch between views like flipping through file folders at a desk, organizing content without clutter.

Basic

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

Loading...

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

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.

Loading...

Orientation

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

Loading...

Collections

Tabs can also be used within collections.

Loading...

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.

Loading...

Disabled

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

Loading...

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>