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

Orientation

With Icons

Collections

Controlled

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.

Disabled