Get started on your web project with our responsive Tailwind CSS Tabs that create a secondary navigational hierarchy for your website.
Tabs are components that render and display subsections to users. They
arrange the content into categories for easy access and a cleaner-looking app.
See below our example that will help you create a simple and easy-to-use Tabs for your Tailwind CSS and React project.
Examples on this page are using @heroicons/react make sure you have installed it.
npm i @heroicons/reactimport {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export function TabsDefault() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="html">
<TabsHeader>
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}Use tabs with icon to display the content in a more organized way.
import React from "react";
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
import {
Square3Stack3DIcon,
UserCircleIcon,
Cog6ToothIcon,
} from "@heroicons/react/24/solid";
export function TabsWithIcon() {
const data = [
{
label: "Dashboard",
value: "dashboard",
icon: Square3Stack3DIcon,
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "Profile",
value: "profile",
icon: UserCircleIcon,
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Settings",
value: "settings",
icon: Cog6ToothIcon,
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="dashboard">
<TabsHeader>
{data.map(({ label, value, icon }) => (
<Tab key={value} value={value}>
<div className="flex items-center gap-2">
{React.createElement(icon, { className: "w-5 h-5" })}
{label}
</div>
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}You can modify the open/close state animation for TabsBody component using the animate prop.
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export function TabsCustomAnimation() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs id="custom-animation" value="html">
<TabsHeader>
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody
animate={{
initial: { y: 250 },
mount: { y: 0 },
unmount: { y: 250 },
}}
>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}Use the example below to create Tabs component with a transparent header.
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export function TransparentTabs() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="html" className="max-w-[40rem]">
<TabsHeader
className="bg-transparent"
indicatorProps={{
className: "bg-gray-900/10 shadow-none !text-gray-900",
}}
>
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}You can change the tabs orientation from horizontal to vertical using the orientation prop.
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export function VerticalTabs() {
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="html" orientation="vertical">
<TabsHeader className="w-32">
{data.map(({ label, value }) => (
<Tab key={value} value={value}>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value} className="py-0">
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}You can change the tabs orientation from horizontal to vertical using the orientation prop.
import React from "react";
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
import {
Square3Stack3DIcon,
UserCircleIcon,
Cog6ToothIcon,
} from "@heroicons/react/24/solid";
export function VerticalTabsWithIcon() {
const data = [
{
label: "Dashboard",
value: "dashboard",
icon: Square3Stack3DIcon,
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "Profile",
value: "profile",
icon: UserCircleIcon,
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Settings",
value: "settings",
icon: Cog6ToothIcon,
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value="dashboard" orientation="vertical">
<TabsHeader className="w-40">
{data.map(({ label, value, icon }) => (
<Tab key={value} value={value} className="place-items-start">
<div className="flex items-center gap-2">
{React.createElement(icon, { className: "w-5 h-5" })}
{label}
</div>
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value} className="py-0">
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}You can use tailwind css classes for customizing the tabs components, see the example below for an underline tabs component.
import React from "react";
import {
Tabs,
TabsHeader,
TabsBody,
Tab,
TabPanel,
} from "@material-tailwind/react";
export function UnderlineTabs() {
const [activeTab, setActiveTab] = React.useState("html");
const data = [
{
label: "HTML",
value: "html",
desc: `It really matters and then like it really doesn't matter.
What matters is the people who are sparked by it. And the people
who are like offended by it, it doesn't matter.`,
},
{
label: "React",
value: "react",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Vue",
value: "vue",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
{
label: "Angular",
value: "angular",
desc: `Because it's about motivating the doers. Because I'm here
to follow my dreams and inspire other people to follow their dreams, too.`,
},
{
label: "Svelte",
value: "svelte",
desc: `We're not always in the position that we want to be at.
We're constantly growing. We're constantly making mistakes. We're
constantly trying to express ourselves and actualize our dreams.`,
},
];
return (
<Tabs value={activeTab}>
<TabsHeader
className="rounded-none border-b border-blue-gray-50 bg-transparent p-0"
indicatorProps={{
className:
"bg-transparent border-b-2 border-gray-900 shadow-none rounded-none",
}}
>
{data.map(({ label, value }) => (
<Tab
key={value}
value={value}
onClick={() => setActiveTab(value)}
className={activeTab === value ? "text-gray-900" : ""}
>
{label}
</Tab>
))}
</TabsHeader>
<TabsBody>
{data.map(({ value, desc }) => (
<TabPanel key={value} value={value}>
{desc}
</TabPanel>
))}
</TabsBody>
</Tabs>
);
}The following props are available for tabs component. These are the custom props that we've added for the tabs component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
value | Value | Set's the default visible tab | No default value it's a required prop. |
orientation | Orientation | Set's the tab orientation | horizontal. |
className | string | Add custom className for tabs | '' |
children | node | Add content for tabs | No default value it's a required prop. |
import type { TabsProps } from "@material-tailwind/react";The following props are available for tabs header component. These are the custom props that we've added for the tabs header component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
indicatorProps | object | Add custom props for tabs header indicator | undefined |
className | string | Add custom className for tabs header | '' |
children | node | Add content for tabs header | No default value it's a required prop. |
import type { TabsHeaderProps } from "@material-tailwind/react";The following props are available for tabs body component. These are the custom props that we've added for the tabs body component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
animate | Animate | Change tabs body animation | undefined |
className | string | Add custom className for tabs body | '' |
children | node | Add content for tabs body | No default value it's a required prop. |
import type { TabsBodyProps } from "@material-tailwind/react";The following props are available for tab component. These are the custom props that come with we've added for the tab component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
value | Value | Set's the tab value, it should be the same value as tab panel value | No default value it's a required prop. |
disabled | boolean | Disable tab | false |
className | string | Add custom className for tab | '' |
children | node | Add content for tab | No default value it's a required prop. |
import type { TabProps } from "@material-tailwind/react";The following props are available for tab panel component. These are the custom props that we've added for the tab panel component and you can use all the other native props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
value | Value | Set's the tab panel value, it should be the same value as tab value | No default value it's a required prop. |
className | string | Add custom className for tab panel | '' |
children | node | Add content for tab panel | No default value it's a required prop. |
import type { TabPanelProps } from "@material-tailwind/react";type value = string | number;type value = "horizontal" | "vertical";type animate = {
initial?: object;
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for tabs components, the theme object for tabs components has two main objects:
A. The defaultProps object for setting up the default value for props of tabs component.
B. The styles object for customizing the theme and styles of tabs component.
You can customize the theme and styles of tabs components by adding Tailwind CSS classes as key paired values for objects.
interface TabsStylesType {
defaultProps: {
className: string;
orientation: "horizontal" | "vertical";
};
styles: {
base: object;
vertical: object;
horizontal: object;
};
}import type { TabsStylesType } from "@material-tailwind/react";const theme = {
tabs: {
defaultProps: {
className: "",
orientation: "horizontal",
},
styles: {
base: {
overflow: "overflow-hidden",
},
horizontal: {
display: "block",
},
vertical: {
display: "flex",
},
},
},
};interface TabsHeaderStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
horizontal: object;
vertical: object;
};
}import type { TabsHeaderStylesType } from "@material-tailwind/react";const theme = {
tabsHeader: {
defaultProps: {
className: "",
},
styles: {
base: {
display: "flex",
position: "relative",
bg: "bg-blue-gray-50",
bgOpacity: "bg-opacity-60",
borderRadius: "rounded-lg",
p: "p-1",
},
horizontal: {
flexDirection: "flex-row",
},
vertical: {
flexDirection: "flex-col",
},
},
},
};interface TabsBodyStylesType {
defaultProps: {
animate: {
initial: object;
mount: object;
unmount: object;
};
className: string;
};
styles: {
base: object;
};
}import type { TabsBodyStylesType } from "@material-tailwind/react";const theme = {
tabsBody: {
defaultProps: {
animate: {
unmount: {},
mount: {},
},
className: "",
},
styles: {
base: {
display: "block",
width: "w-full",
position: "relative",
bg: "bg-transparent",
overflow: "overflow-hidden",
},
},
},
};interface TabStylesType {
defaultProps: {
className: string;
disabled: boolean;
};
styles: {
base: {
tab: {
initial: object;
disabled: object;
};
indicator: object;
};
};
}import type { TabStylesType } from "@material-tailwind/react";const theme = {
tab: {
defaultProps: {
className: "",
activeClassName: "",
disabled: false,
},
styles: {
base: {
tab: {
initial: {
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
textAlign: "text-center",
width: "w-full",
height: "h-full",
position: "relative",
bg: "bg-transparent",
py: "py-1",
px: "px-2",
color: "text-blue-gray-900",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-normal",
lineHeight: "leading-relaxed",
userSelect: "select-none",
cursor: "cursor-pointer",
},
disabled: {
opacity: "opacity-50",
cursor: "cursor-not-allowed",
pointerEvents: "pointer-events-none",
userSelect: "select-none",
},
},
indicator: {
position: "absolute",
inset: "inset-0",
zIndex: "z-10",
height: "h-full",
bg: "bg-white",
borderRadius: "rounded-md",
boxShadow: "shadow",
},
},
},
},
};interface TabPanelStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
};
}import type { TabPanelStylesType } from "@material-tailwind/react";const theme = {
tabPanel: {
defaultProps: {
className: "",
},
styles: {
base: {
width: "w-full",
height: "h-max",
color: "text-gray-700",
p: "p-4",
fontSmoothing: "antialiased",
fontFamily: "font-sans",
fontSize: "text-base",
fontWeight: "font-light",
lineHeight: "leading-relaxed",
},
},
},
};