Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

Browse and explore components

Tabs

Tabs are a UI component used to organize content into separate views that can be switched between within the same space.

Default Tabs

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

import { TabItem, Tabs } from 'flowbite-react'
import { Icon } from '@iconify/react'

const DefaultTabsCode = () => {
  return (
    <div>
      <div>
        <Tabs aria-label='Default tabs'>
          <TabItem
            active
            title='Profile'
            icon={() => <Icon icon='solar:shield-user-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Profile tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Dashboard'
            icon={() => <Icon icon='solar:graph-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Dashboard tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Settings'
            icon={() => <Icon icon='solar:settings-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Settings tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Contacts'
            icon={() => <Icon icon='solar:accessibility-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Contacts tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem disabled title='Disabled'>
            Disabled content
          </TabItem>
        </Tabs>
      </div>
    </div>
  )
}

export default DefaultTabsCode

Tabs With Underline

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

import { TabItem, Tabs } from 'flowbite-react'
import { Icon } from '@iconify/react'

const UnderlineTabsCode = () => {
  return (
    <div>
      <div>
        <Tabs aria-label='Tabs with underline' variant='underline'>
          <TabItem
            active
            title='Profile'
            icon={() => <Icon icon='solar:shield-user-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Profile tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Dashboard'
            icon={() => <Icon icon='solar:graph-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Dashboard tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Settings'
            icon={() => <Icon icon='solar:settings-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Settings tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Contacts'
            icon={() => <Icon icon='solar:accessibility-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Contacts tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem disabled title='Disabled'>
            Disabled content
          </TabItem>
        </Tabs>
      </div>
    </div>
  )
}

export default UnderlineTabsCode

Tabs With Pills

Content 1

import { TabItem, Tabs } from 'flowbite-react'

const TabsPillcode = () => {
  return (
    <div>
      <div>
        <Tabs aria-label='Pills'>
          <TabItem active title='Tab 1' className='rounded-t-lg'>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              Content 1
            </p>
          </TabItem>
          <TabItem title='Tab 2'>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              Content 2
            </p>
          </TabItem>
          <TabItem title='Tab 3'>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              Content 3
            </p>
          </TabItem>
          <TabItem title='Tab 4'>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              Content 4
            </p>
          </TabItem>
          <TabItem disabled title='Tab 5'>
            <p className='text-sm text-gray-500 dark:text-gray-400'>
              Content 5
            </p>
          </TabItem>
        </Tabs>
      </div>
    </div>
  )
}

export default TabsPillcode

Full Width Tabs

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

import { TabItem, Tabs } from 'flowbite-react'
import { Icon } from '@iconify/react'

const FullWidthTabsCode = () => {
  return (
    <div>
      <div className='overflow-x-auto'>
        <Tabs aria-label='Full width tabs' variant='fullWidth'>
          <TabItem
            active
            title='Profile'
            icon={() => <Icon icon='solar:shield-user-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Profile tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Dashboard'
            icon={() => <Icon icon='solar:graph-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Dashboard tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Settings'
            icon={() => <Icon icon='solar:settings-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Settings tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Contacts'
            icon={() => <Icon icon='solar:accessibility-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Contacts tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem disabled title='Disabled'>
            Disabled content
          </TabItem>
        </Tabs>
      </div>
    </div>
  )
}

export default FullWidthTabsCode

React state options

This is Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

Active tab: 0

import { useRef, useState } from 'react'
import { Icon } from '@iconify/react'
import { Button, ButtonGroup, TabItem, Tabs, TabsRef } from 'flowbite-react'

const StateTabsCode = () => {
  const tabsRef = useRef<TabsRef>(null)
  const [activeTab, setActiveTab] = useState(0)

  return (
    <div>
      <div className='sm:flex flex-col gap-3'>
        <Tabs
          aria-label='Default tabs'
          ref={tabsRef}
          onActiveTabChange={(tab) => setActiveTab(tab)}>
          <TabItem
            active
            title='Profile'
            icon={() => <Icon icon='solar:shield-user-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Profile tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Dashboard'
            icon={() => <Icon icon='solar:graph-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Dashboard tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Settings'
            icon={() => <Icon icon='solar:settings-outline' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Settings tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem
            title='Contacts'
            icon={() => <Icon icon='solar:accessibility-linear' height={20} />}>
            This is{' '}
            <span className='font-medium text-gray-800 dark:text-white'>
              Contacts tab's associated content
            </span>
            . Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
          </TabItem>
          <TabItem disabled title='Disabled'>
            Disabled content
          </TabItem>
        </Tabs>
        <div className='text-sm text-gray-500 dark:text-gray-400'>
          Active tab: {activeTab}
        </div>
        <ButtonGroup className='md:flex hidden'>
          <Button color='gray' onClick={() => tabsRef.current?.setActiveTab(0)}>
            Profile
          </Button>
          <Button color='gray' onClick={() => tabsRef.current?.setActiveTab(1)}>
            Dashboard
          </Button>
          <Button color='gray' onClick={() => tabsRef.current?.setActiveTab(2)}>
            Settings
          </Button>
          <Button color='gray' onClick={() => tabsRef.current?.setActiveTab(3)}>
            Contacts
          </Button>
        </ButtonGroup>
      </div>
    </div>
  )
}

export default StateTabsCode

API ( Tabs )

Prop	Description	Type	Default
variant	Sets the tab style variant.	'default' \| 'underline' \| 'pills' \| 'fullWidth'	'default'
icon	Pass the icon prop to add an icon to the tab item.	'HiAdjustments' \| 'HiClipboardList'	-

Menu

Ready-to-Use Components Powered by Flowbite, ShadCN & Headless UI

Component Library

INPUTS

DATA DISPLAY

FEEDBACK

NAVIGATION

SURFACES

UTILS

Tabs

Default Tabs

Sample Code

Tabs With Underline

Sample Code

Tabs With Pills

Sample Code

Full Width Tabs

Sample Code

React state options

Sample Code

API ( Tabs )