Welcome UI - Customizable design system with react

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>
        <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 disabled store={tab} tabId="tab5">
        Tab.Panel 5
      </Tab.Panel>
    </>
  )
}

export default Example

Installation

Run the following command:

yarn add @welcome-ui/tabs

Import component:

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

Examples

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

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 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.

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' })