React Tabs - Flowbite
The tabs component can be used to show a list of tab items that you can click on to change the content inside of the main tabs component using React state reactivity.
Choose one of the examples below based on various styles, layouts, and content types that you can customize with React components, props and the utility classes from Tailwind CSS.
Make sure that you import the component from the flowbite-react library:
import { TabItem, Tabs } from "flowbite-react";
Default tabs#
Add the <TabItem> child component to the <Tabs> component to create a tab item and you can add any type of markup and React components inside of it and it will be shown when clicking on the associated tab item.
You can also choose to add the active prop to the <TabItem> component to make it active by default and set the title of the tab item using the title prop.
Additionally, if you pass the disabled prop to the <TabItem> component, it will be disabled and you won't be able to click on it.
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.
Tabs with underline#
Pass the variant="underline" prop to the <Tabs> component to make the tabs have an underline style.
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.
Tabs with icons#
Pass the icon prop to the <TabItem> component to add an icon to the tab item.
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.
Tabs with pills#
Add the variant="pills" prop to the <Tabs> component to make the tabs have a pills style with rounded corners as an alternative style.
Full width tabs#
Make the tabs span the full width of their container, pass the variant="fullWidth" prop to the <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.
React state options#
Here's an example on how you can set the activate tab programatically using the React state variables and functions of activateTab and setActivateTab.
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.
Theme#
To learn more about how to customize the appearance of components, please see the Theme docs.
{
"base": "flex flex-col gap-2",
"tablist": {
"base": "flex text-center",
"variant": {
"default": "flex-wrap border-b border-gray-200 dark:border-gray-700",
"underline": "-mb-px flex-wrap border-b border-gray-200 dark:border-gray-700",
"pills": "flex-wrap space-x-2 text-sm font-medium text-gray-500 dark:text-gray-400",
"fullWidth": "grid w-full grid-flow-col divide-x divide-gray-200 rounded-none text-sm font-medium shadow dark:divide-gray-700 dark:text-gray-400"
},
"tabitem": {
"base": "flex items-center justify-center rounded-t-lg p-4 text-sm font-medium first:ml-0 focus:outline-none disabled:cursor-not-allowed disabled:text-gray-400 disabled:dark:text-gray-500",
"variant": {
"default": {
"base": "rounded-t-lg",
"active": {
"on": "bg-gray-100 text-primary-600 dark:bg-gray-800 dark:text-primary-500",
"off": "text-gray-500 hover:bg-gray-50 hover:text-gray-600 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300"
}
},
"underline": {
"base": "rounded-t-lg",
"active": {
"on": "rounded-t-lg border-b-2 border-primary-600 text-primary-600 dark:border-primary-500 dark:text-primary-500",
"off": "border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
}
},
"pills": {
"base": "",
"active": {
"on": "rounded-lg bg-primary-600 text-white",
"off": "rounded-lg hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-white"
}
},
"fullWidth": {
"base": "ml-0 flex w-full rounded-none first:ml-0",
"active": {
"on": "rounded-none bg-gray-100 p-4 text-gray-900 dark:bg-gray-700 dark:text-white",
"off": "rounded-none bg-white hover:bg-gray-50 hover:text-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white"
}
}
},
"icon": "mr-2 h-5 w-5"
}
},
"tabitemcontainer": {
"base": "",
"variant": {
"default": "",
"underline": "",
"pills": "",
"fullWidth": ""
}
},
"tabpanel": "py-3"
}