Tabs

Tabs make it easy to explore and switch between different views.

See Reakit for documentation.

Install and import

Default

Set the tab activated by default using selectedId on useTabState.

Tab.Panel 1

With no border

The border on Tab.List is an inset shadow that you can customize or disable via the boxShadow style prop

Tab.Panel 1

With a badge

Add badges in tab.

Tab.Panel 2

Use another component

Use another component in tab.

Tab.Panel 1

One tab

Active bar doesn't display with only one tab.

Tab.Panel 1

Vertical

Set the tab orientation by providing the orientation prop to the tab state

Tab.Panel 2

Properties

Tab

NameType(s)DefaultRequired
as
union
children
node
id
string

Tab.List

NameType(s)DefaultRequired
as
union
children
node
orientation
vertical
horizontal

Tab.Panel

NameType(s)DefaultRequired
as
union
children
node
orientation
vertical
horizontal
tabId
string

Dependencies

Peer dependencies