Welcome UI - Tabs

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>
        <Tab id="tab2" store={tab}>
          Tab 2
        </Tab>
        <Tab id="tab3" store={tab}>
          Tab 3
        </Tab>
        <Tab id="tab4" store={tab}>
          Tab 4
        </Tab>
        <Tab disabled id="tab5" store={tab}>
          Tab 5
        </Tab>
      </Tab.List>
      <Tab.Panel store={tab} tabId="tab1">
        Tab.Panel 1
      </Tab.Panel>
      <Tab.Panel store={tab} tabId="tab2">
        Tab.Panel 2
      </Tab.Panel>
      <Tab.Panel store={tab} tabId="tab3">
        Tab.Panel 3
      </Tab.Panel>
      <Tab.Panel store={tab} tabId="tab4">
        Tab.Panel 4
      </Tab.Panel>
      <Tab.Panel store={tab} tabId="tab5">
        Tab.Panel 5
      </Tab.Panel>
    </>
  )
}

export default Example

Examples

Sizes

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 with Tailwind (e.g. className="shadow-none")

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.

Vertical

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

useTab

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

Pass options to useTab:

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