AstroLaunch UI Tabs - React

Get started on your web project with our responsive AstroLaunch UI 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 AstroLaunch UI and React project.

Examples on this page are using @heroicons/react make sure you have installed it.

npm i @heroicons/react

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";
 
export function TabsDefault() {
  const data = [
    {
      label: "Astro",
      value: "astro",
      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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";
 
export function TransparentTabs() {
  const data = [
    {
      label: "Astro",
      value: "astro",
      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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";
 
export function VerticalTabs() {
  const data = [
    {
      label: "Astro",
      value: "astro",
      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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

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.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too.

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.

import React from "react";
import {
  Tabs,
  TabsHeader,
  TabsBody,
  Tab,
  TabPanel,
} from "@material-tailwind/react";
 
export function UnderlineTabs() {
  const [activeTab, setActiveTab] = React.useState("astro");
  const data = [
    {
      label: "Astro",
      value: "astro",
      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.

For TypeScript Only

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.

For TypeScript Only

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.

For TypeScript Only

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.

For TypeScript Only

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.

For TypeScript Only

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;
  };
}

For TypeScript Only

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;
  };
}

For TypeScript Only

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;
  };
}

For TypeScript Only

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;
    };
  };
}

For TypeScript Only

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;
  };
}

For TypeScript Only

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",
      },
    },
  },
};