Tailwind CSS Tabs - Props



Tabs Props

The following props are available for 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.

AttributeTypeDescriptionDefault
valueValueSet's the default visible tabNo default value it's a required prop.
classNamestringAdd custom className for tabs''
childrennodeAdd content for tabsNo 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 come with we've added for the tabs header component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
indicatorPropsobjectAdd custom props for tabs header indicatorundefined
classNamestringAdd custom className for tabs header''
childrennodeAdd content for tabs headerNo 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 come with we've added for the tabs body component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
animateAnimateChange tabs body animationundefined
classNamestringAdd custom className for tabs body''
childrennodeAdd content for tabs bodyNo 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.

AttributeTypeDescriptionDefault
valueValueSet's the tab value, it should be the same value as tab panel valueNo default value it's a required prop.
disabledbooleanDisable tabfalse
classNamestringAdd custom className for tab''
childrennodeAdd content for tabNo 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 come with we've added for the tab panel component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
valueValueSet's the tab panel value, it should be the same value as tab valueNo default value it's a required prop.
classNamestringAdd custom className for tab panel''
childrennodeAdd content for tab panelNo default value it's a required prop.


For TypeScript Only

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

Types - Value

type value = string | number;

Types - Animate

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

Related

Examples

Checkout different examples for tabs components.

Theme

Learn how to customize the theme and styles for tabs components.

Edit this page on Github