| title | Tailwind CSS Tabs for React - Material Tailwind | |||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| description | Customise your web projects with our beautiful tabs component for Tailwind CSS and React using Material Design guidelines. | |||||||||||||||||||||||||||
| navigation |
|
|||||||||||||||||||||||||||
| github | tabs | |||||||||||||||||||||||||||
| prev | switch | |||||||||||||||||||||||||||
| next | textarea |
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/react<CodePreview link="tabs#tabs" component={<TabsExamples.TabsDefault />}>
import {
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>
);
}## Tabs with Icon
Use tabs with icon to display the content in a more organized way.
<CodePreview link="tabs#tabs-with-icon" component={<TabsExamples.TabsWithIcon />}>
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>
);
}## Custom Tabs Animation
You can modify the open/close state animation for TabsBody component using the animate prop.
<CodePreview component={<TabsExamples.TabsCustomAnimation />}>
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>
);
}## Transparent Tabs
Use the example below to create Tabs component with a transparent header.
<CodePreview component={<TabsExamples.TransparentTabs />}>
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>
);
}## Vertical Tabs
You can change the tabs orientation from horizontal to vertical using the orientation prop.
<CodePreview component={<TabsExamples.VerticalTabs />}>
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>
);
}## Vertical Tabs with Icon
You can change the tabs orientation from horizontal to vertical using the orientation prop.
<CodePreview component={<TabsExamples.VerticalTabsWithIcon />}>
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>
);
}## Underline Tabs
You can use tailwind css classes for customizing the tabs components, see the example below for an underline tabs component.
<CodePreview component={<TabsExamples.UnderlineTabs />}>
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>
);
}## Tabs Props
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";## Tabs Header Props 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";## Tabs Body Props 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";## Tab Props 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";## Tab Panel Props 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";## Types - Value
type value = string | number;## Types - Orientation
type value = "horizontal" | "vertical";## Types - Animate
type animate = {
initial?: object;
mount?: object;
unmount?: object;
};## Tabs Theme
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.
## Tabs Theme Object Type
interface TabsStylesType {
defaultProps: {
className: string;
orientation: "horizontal" | "vertical";
};
styles: {
base: object;
vertical: object;
horizontal: object;
};
}import type { TabsStylesType } from "@material-tailwind/react";## Tabs Theme Customization
const theme = {
tabs: {
defaultProps: {
className: "",
orientation: "horizontal",
},
styles: {
base: {
overflow: "overflow-hidden",
},
horizontal: {
display: "block",
},
vertical: {
display: "flex",
},
},
},
};## Tabs Header Theme Object Type
interface TabsHeaderStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
horizontal: object;
vertical: object;
};
}import type { TabsHeaderStylesType } from "@material-tailwind/react";## Tabs Header Theme Customization
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",
},
},
},
};## Tabs Body Theme Object Type
interface TabsBodyStylesType {
defaultProps: {
animate: {
initial: object;
mount: object;
unmount: object;
};
className: string;
};
styles: {
base: object;
};
}import type { TabsBodyStylesType } from "@material-tailwind/react";## Tabs Body Theme Customization
const theme = {
tabsBody: {
defaultProps: {
animate: {
unmount: {},
mount: {},
},
className: "",
},
styles: {
base: {
display: "block",
width: "w-full",
position: "relative",
bg: "bg-transparent",
overflow: "overflow-hidden",
},
},
},
};## Tab Theme Object Type
interface TabStylesType {
defaultProps: {
className: string;
disabled: boolean;
};
styles: {
base: {
tab: {
initial: object;
disabled: object;
};
indicator: object;
};
};
}import type { TabStylesType } from "@material-tailwind/react";## Tab Theme Customization
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",
},
},
},
},
};## Tab Panel Theme Object Type
interface TabPanelStylesType {
defaultProps: {
className: string;
};
styles: {
base: object;
};
}import type { TabPanelStylesType } from "@material-tailwind/react";## Tab Panel Theme Customization
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",
},
},
},
};## Explore More Tailwind CSS Examples
Looking for more tab examples? Check out our Pricing Sections from Material Tailwind Blocks.