WUI logo


The Tabs component is a navigational element that allows users to switch between different views or sections of content within the same page. Each tab is associated with a content panel, and clicking a tab displays the corresponding panel while hiding others. This component helps organize content efficiently and improves user experience by providing easy access to different sections without leaving the current page.

import * as React from 'react'
import { Tab, useTab } from '@welcome-ui/tabs'
const Example = () => {
const tab = useTab({ defaultSelectedId: 'tab1' })
return (
<Tab.List aria-label="Tabs" store={tab}>
<Tab id="tab1" store={tab}>
Tab 1
<Tab id="tab2" store={tab}>
Tab 2
<Tab id="tab3" store={tab}>
Tab 3
<Tab id="tab4" store={tab}>
Tab 4
<Tab disabled id="tab5" store={tab}>
Tab 5
<Tab.Panel store={tab} tabId="tab1">
Tab.Panel 1
<Tab.Panel store={tab} tabId="tab2">
Tab.Panel 2
<Tab.Panel store={tab} tabId="tab3">
Tab.Panel 3
<Tab.Panel store={tab} tabId="tab4">
Tab.Panel 4
<Tab.Panel disabled store={tab} tabId="tab5">
Tab.Panel 5
export default Example



Run the following command:

yarn add @welcome-ui/tabs

Import component:

import { Tabs, useTabs } from '@welcome-ui/tabs'

Use Table, Table.Thead, Table.Th, Table.Tbody, Table.Td, Table.Tr.


Size is set on Tab.List. Available sizes are sm and md. By default size is set to md.

With no border

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

With a badge

Add badges, icons and images in tab.

Use another component

Use another component in tab.

One tab

Active bar doesn't display with only one tab.


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


We use useTab from Ariakit Tab for the state of the Tab.

Pass options to useTab:

  • defaultSelectedId: e.g. const store = useTab({ defaultSelectedId: 'tab2' })