Tailwind CSS Tabs - React

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.

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.

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel
} from "@material-tailwind/react";
 
export default function Example() {
  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 Props

The following props are available for the tabs component. These are the custom props that come with 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 its a required prop.
`className`	`string`	Add custom className for tabs	`''`
`children`	`node`	Add content for tabs	No default value its a required prop.

Tabs Header Props

The following props are available for the tabs header component. These are the custom props that come with 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 its a required prop.

Tabs Body Props

The following props are available for the tabs body component. These are the custom props that come with 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 its a required prop.

Tab Props

The following props are available for the 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 its a required prop.
`disabled`	`boolean`	Disable tab	`false`
`className`	`string`	Add custom className for tab	`''`
`children`	`node`	Add content for tab	No default value its a required prop.

Tab Panel Props

The following props are available for the tab panel component. These are the custom props that come with 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 its a required prop.
`className`	`string`	Add custom className for tab panel	`''`
`children`	`node`	Add content for tab panel	No default value its a required prop.

Types

type value = string | number;

type animate = {
  mount?: Object;
  unmount?: Object;
};

switch

textarea

Edit this page on Github