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

In the terminal, run the following command to begin:
npx hq-kit add 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.

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

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:

<Tabs.Label isDisabled id="c">Contact</Tabs.Label>
<Tabs.Label isDisabled id="a">About Us</Tabs.Label>
PaginationModal