Tabs - Keep React

The Tab Group Component in the Keep React allows you to organize and display content in a tabbed interface. It provides a convenient way to switch between different sections or views within a single container.

Table of Contents#

Default Tabs#

The Default Tabs component showcases the basic implementation of tabs.

Startup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, reiciendis eaque ipsum aperiam magni commodi natus repudiandae nobis officia vero voluptates illum tenetur blanditiis vitae dolores esse! Aspernatur, tempora tempore.

Learn More

Tab Item Variant#

There are two variants of Tab Item. One is "button" which will by default selected and the other is "link" which will be enabled with props itemType="link".

Startup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, reiciendis eaque ipsum aperiam magni commodi natus repudiandae nobis officia vero voluptates illum tenetur blanditiis vitae dolores esse! Aspernatur, tempora tempore.

Learn More

Vertical Tab#

Display tabs vertically by setting the vertical prop to true.

Startup

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, reiciendis eaque ipsum aperiam magni commodi natus repudiandae nobis officia vero voluptates illum tenetur blanditiis vitae dolores esse! Aspernatur, tempora tempore.

Learn More

Tabs API Reference#

Explore the available props for the <Tab> component

PropertyDescriptionTypeDefault
activeLabelWhich tabs by default will be activestringone
verticalTabs show vertical positionbooleanfalse
itemTypeTab item type
button
link
button

Tabs Items API Reference#

Explore the available props for the <Tabs.Item> component

PropertyDescriptionTypeDefault
labelThis label connect to the contentstringone