HQ UI

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Installation

In the terminal, run the following command to begin:
npx hq-kit add tabs

Basic

This is the overview tab content.

Variant

Orientation

This is the overview tab content.
This is the overview tab content.
This is the overview tab content.

With Icons

This is the overview tab content.

Collections

This is the overview tab content.

Controlled

This is the overview tab content.
selected: 1

Keyboard Navigation

By default, pressing the arrow keys will switch tabs. You can prevent this behavior by setting the keyboardActivation prop to manual then use space or enter button to switch tabs.

This is the first content
This is the first content

Disabled

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.