React Tabs - Flowbite

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Default tabs

Profile content
<Tabs.Group
  aria-label="Default tabs"
  style="default"
>
  <Tabs.Item
    active
    title="Profile"
  >
    Profile content
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    Dashboard content
  </Tabs.Item>
  <Tabs.Item title="Settings">
    Settings content
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    Contacts content
  </Tabs.Item>
  <Tabs.Item
    disabled
    title="Disabled"
  >
    Disabled content
  </Tabs.Item>
</Tabs.Group>

Tabs with underline

Dashboard content
<Tabs.Group
  aria-label="Tabs with underline"
  style="underline"
>
  <Tabs.Item title="Profile">
    Profile content
  </Tabs.Item>
  <Tabs.Item
    active
    title="Dashboard"
  >
    Dashboard content
  </Tabs.Item>
  <Tabs.Item title="Settings">
    Settings content
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    Contacts content
  </Tabs.Item>
  <Tabs.Item
    disabled
    title="Disabled"
  >
    Disabled content
  </Tabs.Item>
</Tabs.Group>

Tabs with icons

Dashboard content
<Tabs.Group
  aria-label="Tabs with icons"
  style="underline"
>
  <Tabs.Item
    icon={HiUserCircle}
    title="Profile"
  >
    Profile content
  </Tabs.Item>
  <Tabs.Item
    active
    icon={MdDashboard}
    title="Dashboard"
  >
    Dashboard content
  </Tabs.Item>
  <Tabs.Item
    icon={HiAdjustments}
    title="Settings"
  >
    Settings content
  </Tabs.Item>
  <Tabs.Item
    icon={HiClipboardList}
    title="Contacts"
  >
    Contacts content
  </Tabs.Item>
  <Tabs.Item
    disabled
    title="Disabled"
  >
    Disabled content
  </Tabs.Item>
</Tabs.Group>

Pills tabs

Content 1
<Tabs.Group
  aria-label="Pills"
  style="pills"
>
  <Tabs.Item
    active
    title="Tab 1"
  >
    Content 1
  </Tabs.Item>
  <Tabs.Item title="Tab 2">
    Content 2
  </Tabs.Item>
  <Tabs.Item title="Tab 3">
    Content 3
  </Tabs.Item>
  <Tabs.Item title="Tab 4">
    Content 4
  </Tabs.Item>
  <Tabs.Item
    disabled
    title="Tab 5"
  >
    Content 5
  </Tabs.Item>
</Tabs.Group>

Full width tabs

Profile content
<Tabs.Group
  aria-label="Full width tabs"
  style="fullWidth"
>
  <Tabs.Item title="Profile">
    Profile content
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    Dashboard content
  </Tabs.Item>
  <Tabs.Item title="Settings">
    Settings content
  </Tabs.Item>
  <Tabs.Item title="Invoice">
    Invoice content
  </Tabs.Item>
</Tabs.Group>

Set active tab programmatically

Profile content
Active tab: 0
<Tabs.Group
  ref={{
    current: '[Circular]'
  }}
  aria-label="Default tabs"
  onActiveTabChange={onActiveTabChange}
  style="default"
>
  <Tabs.Item
    active
    title="Profile"
  >
    Profile content
  </Tabs.Item>
  <Tabs.Item title="Dashboard">
    Dashboard content
  </Tabs.Item>
  <Tabs.Item title="Settings">
    Settings content
  </Tabs.Item>
  <Tabs.Item title="Contacts">
    Contacts content
  </Tabs.Item>
</Tabs.Group>
<div>
  Active tab: 0
</div>
<Button.Group>
  <Button
    color="gray"
    onClick={onClick}
  >
    Profile
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    Dashboard
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    Settings
  </Button>
  <Button
    color="gray"
    onClick={onClick}
  >
    Contacts
  </Button>
</Button.Group>