Tailwind CSS Tabs - React

Get started on your web project with our responsive React and 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 examples that will help you create a simple and easy-to-use Tabs for your Tailwind CSS and React project.

Tabs Demo

Here's how to implement a simple and responsive Tabs component. It can be used for showing different content in a single section of your website.

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.
"use client";

import { Tabs } from "@material-tailwind/react";

export function TabsDemo() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";

export function TabsDemo() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}

Tabs with Icon

Use this example to add icons to your Tabs.Trigger component to make them more visually appealing and informative.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

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.
"use client";

import { Tabs } from "@material-tailwind/react";
import { SelectFace3d, ProfileCircle, Settings } from "iconoir-react";

export function TabsWithIcon() {
  return (
    <Tabs defaultValue="dashboard">
      <Tabs.List className="w-full">
        <Tabs.Trigger className="w-full" value="dashboard">
          <SelectFace3d className="mr-2 h-4 w-4" />
          Dashboard
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="profile">
          <ProfileCircle className="mr-2 h-4 w-4" />
          User Profile
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="settings">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="dashboard">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="profile">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="settings">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";
import { SelectFace3d, ProfileCircle, Settings } from "iconoir-react";

export function TabsWithIcon() {
  return (
    <Tabs defaultValue="dashboard">
      <Tabs.List className="w-full">
        <Tabs.Trigger className="w-full" value="dashboard">
          <SelectFace3d className="mr-2 h-4 w-4" />
          Dashboard
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="profile">
          <ProfileCircle className="mr-2 h-4 w-4" />
          User Profile
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="settings">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="dashboard">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="profile">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="settings">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}

Vertical Tabs

You can use the orientation prop to change the Tabs component to a vertical layout. This is useful when you have the tabs on the side of the content.

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.
"use client";

import { Tabs } from "@material-tailwind/react";

export function VerticalTabs() {
  return (
    <Tabs defaultValue="html" orientation="vertical">
      <Tabs.List>
        <Tabs.Trigger value="html">HTML</Tabs.Trigger>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="angular">Angular</Tabs.Trigger>
        <Tabs.Trigger value="svelte">Svelte</Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";

export function VerticalTabs() {
  return (
    <Tabs defaultValue="html" orientation="vertical">
      <Tabs.List>
        <Tabs.Trigger value="html">HTML</Tabs.Trigger>
        <Tabs.Trigger value="react">React</Tabs.Trigger>
        <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
        <Tabs.Trigger value="angular">Angular</Tabs.Trigger>
        <Tabs.Trigger value="svelte">Svelte</Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}

Vertical Tabs with Icon

Use this example to add icons to your Tabs.Trigger component to make them more visually appealing and informative.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

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.
"use client";

import { Tabs } from "@material-tailwind/react";
import { SelectFace3d, ProfileCircle, Settings } from "iconoir-react";

export function VerticalTabsWithIcon() {
  return (
    <Tabs defaultValue="dashboard" orientation="vertical">
      <Tabs.List>
        <Tabs.Trigger value="dashboard">
          <SelectFace3d className="mr-2 h-4 w-4" />
          Dashboard
        </Tabs.Trigger>
        <Tabs.Trigger value="profile">
          <ProfileCircle className="mr-2 h-4 w-4" />
          User Profile
        </Tabs.Trigger>
        <Tabs.Trigger value="settings">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="dashboard">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="profile">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="settings">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";
import { SelectFace3d, ProfileCircle, Settings } from "iconoir-react";

export function VerticalTabsWithIcon() {
  return (
    <Tabs defaultValue="dashboard" orientation="vertical">
      <Tabs.List>
        <Tabs.Trigger value="dashboard">
          <SelectFace3d className="mr-2 h-4 w-4" />
          Dashboard
        </Tabs.Trigger>
        <Tabs.Trigger value="profile">
          <ProfileCircle className="mr-2 h-4 w-4" />
          User Profile
        </Tabs.Trigger>
        <Tabs.Trigger value="settings">
          <Settings className="mr-2 h-4 w-4" />
          Settings
        </Tabs.Trigger>
        <Tabs.TriggerIndicator />
      </Tabs.List>
      <Tabs.Panel value="dashboard">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="profile">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="settings">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}

Transparent Tabs

Use this example to create a Tabs component with transparent triggers and a faded idicator. This is useful when you want to show the tabs on top of an image or a colored background.

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.
"use client";

import { Tabs } from "@material-tailwind/react";

export function TransparentTabs() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full bg-transparent">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator className="bg-primary/10 shadow-none" />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";

export function TransparentTabs() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full bg-transparent">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator className="bg-primary/10 shadow-none" />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}

Underline Tabs

Use this example to create a Tabs component with underline triggers and a simple colored indicator. This is useful when you want to show the tabs on top of a white or light-colored background.

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.
"use client";

import { Tabs } from "@material-tailwind/react";

export function UnderlineTabs() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full rounded-none border-b border-secondary-dark bg-transparent py-0">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator className="rounded-none border-b-2 border-primary bg-transparent shadow-none" />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}
"use client";

import { Tabs } from "@material-tailwind/react";

export function UnderlineTabs() {
  return (
    <Tabs defaultValue="html">
      <Tabs.List className="w-full rounded-none border-b border-secondary-dark bg-transparent py-0">
        <Tabs.Trigger className="w-full" value="html">
          HTML
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="react">
          React
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="vue">
          Vue
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="angular">
          Angular
        </Tabs.Trigger>
        <Tabs.Trigger className="w-full" value="svelte">
          Svelte
        </Tabs.Trigger>
        <Tabs.TriggerIndicator className="rounded-none border-b-2 border-primary bg-transparent shadow-none" />
      </Tabs.List>
      <Tabs.Panel value="html">
        It really matters and then like it really doesn&apos;t matter. What
        matters is the people who are sparked by it. And the people who are like
        offended by it, it doesn&apos;t matter.
      </Tabs.Panel>
      <Tabs.Panel value="react">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="vue">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
      <Tabs.Panel value="angular">
        Because it&apos;s about motivating the doers. Because I&apos;m here to
        follow my dreams and inspire other people to follow their dreams, too.
      </Tabs.Panel>
      <Tabs.Panel value="svelte">
        We&apos;re not always in the position that we want to be at. We&apos;re
        constantly growing. We&apos;re constantly making mistakes. We&apos;re
        constantly trying to express ourselves and actualize our dreams.
      </Tabs.Panel>
    </Tabs>
  );
}