Welcome UI logo

Tabs

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.

SourceBuilt with Ariakit
OverviewProps

Tabs.Tab

badge

string | number

className

string

icon

string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

iconColor

"blue" | "green" | "orange" | "pink" | "teal" | "violet" | "warm"

id

string

The ID of the composite store is used to reference elements within the composite widget before hydration. If not provided, a random ID will be generated.

size

"lg" | "md"

store

TabStore & Store<Partial<TabStoreState>>

Another store object that will be kept in sync with the original store. Live examples: - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)

StepperDrawer