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.

Browse through a wide selection of recipes for all occasions and dietary preferences.

Installation

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

Warning React 19
If you use this component on React 19, you need to use `12.0.0-alpha.1`. Track React 19 progress here: FM React 19 #2667.
npm i [email protected]

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

Import the components and use them as shown below, adapting the structure to fit each component.

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.

Find a variety of workout plans tailored to your fitness level and goals.

Orientation

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

Enroll in courses and access learning materials on various subjects.

Collections

Tabs can also be used within collections.

This is the overview tab content.

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.

Responsive

When tabs get crowded, they can become difficult to manage. To keep them organized and responsive, use the following approach:

Mix it up with a menu, select, or combo box, but this example focuses on mastering the select component.

Select

Select a start and end date, perfect for booking a vacation or setting periods efficiently, streamlining the process of defining time spans with ease.

Disabled

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

Welcome to our service! Here, you’ll find a brief overview of what we offer, our mission, and how we strive to provide value to our customers.

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>
PaginationDisclosure aka Collapsible