Tailwind CSS React Pills

Basic example

Basic tabs are divided into 2 main sections - TETabs (containing TEItem's) and TETabsContent (containing TETabsPane's).

Use pills property to create pills and useState to connect TETabs with TETabsContent.

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsBasicExample(): JSX.Element {
        const [basicActive, setBasicActive] = useState("tab1");
      
        const handleBasicClick = (value: string) => {
          if (value === basicActive) {
            return;
          } 
          setBasicActive(value);
        };
      
        return (
          <div className="mb-3">
            <TETabs pills>
              <TETabsItem
                onClick={() => handleBasicClick("tab1")}
                active={basicActive === "tab1"}
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleBasicClick("tab2")}
                active={basicActive === "tab2"}
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleBasicClick("tab3")}
                active={basicActive === "tab3"}
              >
                Messages
              </TETabsItem>
              <TETabsItem
                onClick={() => handleBasicClick("tab4")}
                active={basicActive === "tab4"}
                disabled
              >
                Contact
              </TETabsItem>
            </TETabs>
      
            <TETabsContent>
              <TETabsPane show={basicActive === "tab1"}>Tab 1 content</TETabsPane>
              <TETabsPane show={basicActive === "tab2"}>Tab 2 content</TETabsPane>
              <TETabsPane show={basicActive === "tab3"}>Tab 3 content</TETabsPane>
              <TETabsPane show={basicActive === "tab4"}>Tab 4 content</TETabsPane>
            </TETabsContent>
          </div>
        );
      }

Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Fill

To proportionately fill all available space with your TETabsItem's, use fill property. Notice that all horizontal space is occupied, but not every pills item has the same width.

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsFill(): JSX.Element {
        const [fillActive, setFillActive] = useState("tab1");
      
        const handleFillClick = (value: string) => {
          if (value === fillActive) {
            return;
          } 
          setFillActive(value);
        };
      
        return (
          <div className="mb-3">
            <TETabs pills fill>
              <TETabsItem
                onClick={() => handleFillClick("tab1")}
                active={fillActive === "tab1"}
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleFillClick("tab2")}
                active={fillActive === "tab2"}
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleFillClick("tab3")}
                active={fillActive === "tab3"}
              >
                Messages
              </TETabsItem>
              <TETabsItem
                onClick={() => handleFillClick("tab4")}
                active={fillActive === "tab4"}
                disabled
              >
                Contact
              </TETabsItem>
            </TETabs>
      
            <TETabsContent>
              <TETabsPane show={fillActive === "tab1"}>Tab 1 content</TETabsPane>
              <TETabsPane show={fillActive === "tab2"}>Tab 2 content</TETabsPane>
              <TETabsPane show={fillActive === "tab3"}>Tab 3 content</TETabsPane>
              <TETabsPane show={fillActive === "tab4"}>Tab 4 content</TETabsPane>
            </TETabsContent>
          </div>
        );
      }

Justify

For equal-width elements, use justify property. All horizontal space will be occupied by TETabsItem's, but unlike the fill property above, every TETabsItem will be the same width.

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsJustify(): JSX.Element {
        const [justifyActive, setJustifyActive] = useState("tab1");
      
        const handleJustifyClick = (value: string) => {
          if (value === justifyActive) {
            return;
          } 
          setJustifyActive(value);
        };
      
        return (
          <div className="mb-3">
            <TETabs pills justify>
              <TETabsItem
                onClick={() => handleJustifyClick("tab1")}
                active={justifyActive === "tab1"}
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleJustifyClick("tab2")}
                active={justifyActive === "tab2"}
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleJustifyClick("tab3")}
                active={justifyActive === "tab3"}
              >
                Messages
              </TETabsItem>
              <TETabsItem
                onClick={() => handleJustifyClick("tab4")}
                active={justifyActive === "tab4"}
                disabled
              >
                Contact
              </TETabsItem>
            </TETabs>
      
            <TETabsContent>
              <TETabsPane show={justifyActive === "tab1"}>Tab 1 content</TETabsPane>
              <TETabsPane show={justifyActive === "tab2"}>Tab 2 content</TETabsPane>
              <TETabsPane show={justifyActive === "tab3"}>Tab 3 content</TETabsPane>
              <TETabsPane show={justifyActive === "tab4"}>Tab 4 content</TETabsPane>
            </TETabsContent>
          </div>
        );
      }

Vertical

Make vertical pills by using vertical property. Add also classes flex items-start to the wrapper div.

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsVertical(): JSX.Element {
        const [verticalActive, setVerticalActive] = useState("tab1");
      
        const handleVerticalClick = (value: string) => {
          if (value === verticalActive) {
            return;
          } 
          setVerticalActive(value);
        };
      
        return (
          <div className="flex items-start">
            <TETabs pills vertical>
              <TETabsItem
                onClick={() => handleVerticalClick("tab1")}
                active={verticalActive === "tab1"}
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleVerticalClick("tab2")}
                active={verticalActive === "tab2"}
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleVerticalClick("tab3")}
                active={verticalActive === "tab3"}
              >
                Messages
              </TETabsItem>
              <TETabsItem
                onClick={() => handleVerticalClick("tab4")}
                active={verticalActive === "tab4"}
                disabled
              >
                Contact
              </TETabsItem>
            </TETabs>
      
            <TETabsContent>
              <TETabsPane show={verticalActive === "tab1"}>Tab 1 content</TETabsPane>
              <TETabsPane show={verticalActive === "tab2"}>Tab 2 content</TETabsPane>
              <TETabsPane show={verticalActive === "tab3"}>Tab 3 content</TETabsPane>
              <TETabsPane show={verticalActive === "tab4"}>Tab 4 content</TETabsPane>
            </TETabsContent>
          </div>
        );
      }

With buttons

You can also use buttons to change the visible content.

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsWithButtons(): JSX.Element {
        const [buttonActive, setButtonActive] = useState("tab1");
      
        const handleButtonClick = (value: string) => {
          if (value === buttonActive) {
            return;
          } 
          setButtonActive(value);
        };
      
        return (
          <div className="mb-3">
            <TETabs pills>
              <TETabsItem
                onClick={() => handleButtonClick("tab1")}
                active={buttonActive === "tab1"}
                tag="button"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleButtonClick("tab2")}
                active={buttonActive === "tab2"}
                tag="button"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleButtonClick("tab3")}
                active={buttonActive === "tab3"}
                tag="button"
              >
                Messages
              </TETabsItem>
            </TETabs>
      
            <TETabsContent>
              <TETabsPane show={buttonActive === "tab1"}>
                Tab 1 content button version
              </TETabsPane>
              <TETabsPane show={buttonActive === "tab2"}>
                Tab 2 content button version
              </TETabsPane>
              <TETabsPane show={buttonActive === "tab3"}>
                Tab 3 content button version
              </TETabsPane>
            </TETabsContent>
          </div>
        );
      }

Color options

Use prop color to change the color of the pills (e.g. TETabsItem color="primary").

        
            
      import React, { useState } from "react";
      import {
        TETabs,
        TETabsContent,
        TETabsItem,
        TETabsPane,
      } from "tw-elements-react";
      
      export default function PillsColors(): JSX.Element {
        const [colorsActive, setColorsActive] = useState({
          tab1: "tab1",
          tab2: "tab1",
          tab3: "tab1",
          tab4: "tab1",
          tab5: "tab1",
          tab6: "tab1",
          tab7: "tab1",
          tab8: "tab1",
        });
      
        const handleColorsClick = (value: object) => {
          if (value === colorsActive) {
            return;
          } 
          setColorsActive({ ...colorsActive, ...value });
        };
      
        return (
          <div className="mb-3">
            {/* color primary */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab1" })}
                active={colorsActive.tab1 === "tab1"}
                color="primary"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab2" })}
                active={colorsActive.tab1 === "tab2"}
                color="primary"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab1: "tab3" })}
                active={colorsActive.tab1 === "tab3"}
                color="primary"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab1 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab1 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab1 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color secondary */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab1" })}
                active={colorsActive.tab2 === "tab1"}
                color="secondary"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab2" })}
                active={colorsActive.tab2 === "tab2"}
                color="secondary"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab2: "tab3" })}
                active={colorsActive.tab2 === "tab3"}
                color="secondary"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab2 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab2 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab2 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color success */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab1" })}
                active={colorsActive.tab3 === "tab1"}
                color="success"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab2" })}
                active={colorsActive.tab3 === "tab2"}
                color="success"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab3: "tab3" })}
                active={colorsActive.tab3 === "tab3"}
                color="success"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab3 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab3 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab3 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color danger */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab1" })}
                active={colorsActive.tab4 === "tab1"}
                color="danger"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab2" })}
                active={colorsActive.tab4 === "tab2"}
                color="danger"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab4: "tab3" })}
                active={colorsActive.tab4 === "tab3"}
                color="danger"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab4 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab4 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab4 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color warning */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab1" })}
                active={colorsActive.tab5 === "tab1"}
                color="warning"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab2" })}
                active={colorsActive.tab5 === "tab2"}
                color="warning"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab5: "tab3" })}
                active={colorsActive.tab5 === "tab3"}
                color="warning"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab5 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab5 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab5 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color info */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab1" })}
                active={colorsActive.tab6 === "tab1"}
                color="info"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab2" })}
                active={colorsActive.tab6 === "tab2"}
                color="info"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab6: "tab3" })}
                active={colorsActive.tab6 === "tab3"}
                color="info"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab6 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab6 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab6 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color light */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab1" })}
                active={colorsActive.tab7 === "tab1"}
                color="light"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab2" })}
                active={colorsActive.tab7 === "tab2"}
                color="light"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab7: "tab3" })}
                active={colorsActive.tab7 === "tab3"}
                color="light"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab7 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab7 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab7 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
      
            {/* color dark */}
            <TETabs pills>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab1" })}
                active={colorsActive.tab8 === "tab1"}
                color="dark"
              >
                Home
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab2" })}
                active={colorsActive.tab8 === "tab2"}
                color="dark"
              >
                Profile
              </TETabsItem>
              <TETabsItem
                onClick={() => handleColorsClick({ ...colorsActive, tab8: "tab3" })}
                active={colorsActive.tab8 === "tab3"}
                color="dark"
              >
                Messages
              </TETabsItem>
            </TETabs>
            <TETabsContent>
              <TETabsPane show={colorsActive.tab8 === "tab1"}>
                Tab 1 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab8 === "tab2"}>
                Tab 2 content
              </TETabsPane>
              <TETabsPane show={colorsActive.tab8 === "tab3"}>
                Tab 3 content
              </TETabsPane>
            </TETabsContent>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Pills from MDBootstrap.

Import

javascript

        
            
        import { 
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane 
        } from "tw-elements-react";

Properties

TETabs

Name	Type	Default	Description
`className`	string	`-`	Adds a custom class to the `TETabs`.
`fill`	boolean	`false`	Fills the available space in `TETabsItem`'s.
`justify`	boolean	`false`	Sets equal width of the `TETabsItem`'s,
`pills`	boolean	`false`	Necessary to change the `TETabs` into pills.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the `TETabs` component.
`vertical`	boolean	`false`	Necessary to change the `TETabs` into vertical.

TETabsContent

Name	Type	Default	Description
`className`	string	`-`	Adds a custom class to the `TETabsContent`.
`ref`	React.Ref<any>	`-`	A reference to the `TETabsContent` component.
`tag`	React.ComponentProps<any>	`'div'`	Defines tag of the `TETabsContent` element. It can be any valid HTML tag like `'div'`, `'ul'`, `'section'`, etc.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the `TETabsContent` component.

TETabsItem

Name	Type	Default	Description
`active`	boolean	`false`	Defines if the `TETabsItem` is active or not.
`className`	string	`-`	Adds a custom class to the `TETabsItem`.
`color`	"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "light" \| "dark"	`"primary"`	Defines the color of the `TETabsItem`. Can be `'primary'`, `'secondary'`, `'success'`, `'info'`, `'warning'`, `'danger'`, `'light'` or `'dark'`.
`disabled`	boolean	`false`	Defines if the `TETabsItem` is disabled or not.
`ref`	React.Ref<any>	`-`	A reference to the `TETabsItem` component.
`tag`	React.ComponentProps<any>	`-`	Defines tag of the `TETabsItem` element. It can be any valid HTML tag like `'div'`, `'ul'`, `'section'`, etc.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the `TETabsItem` component.
`wrapperClass`	string	`-`	Adds cutom class the wrapper element of the `TETabsItem` component.

TETabsPane

Name	Type	Default	Description
`className`	string	`-`	Adds a custom class to the `TETabsPane` component.
`ref`	React.Ref<any>	`-`	A reference to the `TETabsPane` component.
`show`	boolean	`false`	Defines if the `TETabsPane`'s content is shown or not.
`tag`	React.ComponentProps<any>	`false`	Defines tag of the `TETabsPane` element. It can be any valid HTML tag like `'div'`, `'ul'`, `'section'`, etc.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the `TETabsPane` component.

Classes

Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

TETabs

Name	Default	Description
`defaultTabs`	mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0	Sets default styles for the `TETabs` component.
`pillsTabs`	mb-5 flex list-none flex-col flex-wrap pl-0 md:flex-row	Sets styles for the `TETabs` component when it is pills.
`verticalTabs`	mr-4 flex list-none flex-col flex-wrap pl-0	Sets styles for the `TETabs` component when it is vertical.

TETabsContent

Name	Default	Description
`tabsContent`	my-2	Adds margin styles to the `TETabsContent` component.

TETabsItem

Name	Default	Description
`activeDangerPillsLink`	!bg-danger-100 !text-danger-700 dark:text-danger-700	Sets color styles for the `TETabsItem pills color="danger"` link when it is active pill.
`activeDangerTabsLink`	border-danger text-danger dark:text-danger	Sets color styles for the `TETabsItem color="danger"` link when it is active tab.
`activeDarkPillsLink`	!bg-neutral-800 !text-neutral-50 dark:!bg-neutral-900 dark:text-neutral-50	Sets color styles for the `TETabsItem pills color="dark"` link when it is active pill.
`activeDarkTabsLink`	border-neutral-800 text-neutral-800 dark:border-neutral-600 dark:text-neutral-600	Sets color styles for the `TETabsItem color="dark"` link when it is active tab.
`activeInfoPillsLink`	!bg-info-100 !text-info-800 dark:text-info-800	Sets color styles for the `TETabsItem pills color="info"` link when it is active pill.
`activeInfoTabsLink`	border-info text-info dark:text-info	Sets color styles for the `TETabsItem color="info"` link when it is active tab.
`activeLightPillsLink`	!bg-neutral-50 !text-neutral-600 dark:text-neutral-600	Sets color styles for the `TETabsItem pills color="light"` link when it is active pill.
`activeLightTabsLink`	border-neutral-50 text-neutral-50 dark:text-neutral-50	Sets color styles for the `TETabsItem color="light"` link when it is active tab.
`activePrimaryPillsLink`	!bg-primary-100 !text-primary-700 dark:text-primary-700	Sets color styles for the `TETabsItem pills color="primary"` link when it is active pill.
`activePrimaryTabsLink`	text-primary border-primary dark:border-primary-400 dark:text-primary-400	Sets color styles for the `TETabsItem color="primary"` link when it is active tab.
`activeSecondaryPillsLink`	!bg-secondary-200 !text-secondary-900 dark:text-secondary-900	Sets color styles for the `TETabsItem pills color="secondary"` link when it is active pill.
`activeSecondaryTabsLink`	text-secondary border-secondary dark:text-secondary	Sets color styles for the `TETabsItem color="secondary"` link when it is active tab.
`activeSuccessPillsLink`	!bg-success-100 !text-success-700 dark:text-success-700	Sets color styles for the `TETabsItem pills color="success"` link when it is active pill.
`activeSuccessTabsLink`	border-success text-success dark:text-success	Sets color styles for the `TETabsItem color="success"` link when it is active tab.
`activeWarningPillsLink`	!bg-warning-100 !text-warning-800 dark:text-warning-800	Sets color styles for the `TETabsItem pills color="warning"` link when it is active pill.
`activeWarningTabsLink`	border-warning text-warning dark:text-warning	Sets color styles for the `TETabsItem color="warning"` link when it is active tab.
`disabledPillsLink`	!bg-neutral-200 !text-neutral-400 dark:!text-neutral-500 dark:!bg-neutral-600	Sets color styles for the `TETabsItem pills` link when it is disabled pill.
`disabledTabsItem`	disabled pointer-events-none	Sets wrapper styles to the `TETabsItem` component when it is disabled.
`disabledTabsLink`	!text-neutral-400 dark:!text-neutral-600	Sets color styles for the `TETabsItem` link when it is disabled tab.
`fillTabsItem`	flex-auto text-center	Sets wrapper styles to the `TETabsItem` component when it is fill tab.
`inactivePillsLink`	bg-neutral-100 dark:bg-neutral-700 dark:text-white md:mr-4	Sets color styles for the `TETabsItem pills` link when it is inactive pill.
`inactiveTabsLink`	border-transparent text-neutral-500 focus:border-transparent dark:text-neutral-400	Sets color styles for the `TETabsItem` link when it is inactive tab.
`justifyTabsItem`	flex-grow basis-0 text-center	Sets wrapper styles to the `TETabsItem` component when it is justify tab.
`pillsLink`	mt-2 block cursor-pointer rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 dark:bg-neutral-700 dark:text-white md:mr-4	Sets default styles for the `TETabsItem` link when it is pill.
`tabsLink`	mt-2 block cursor-pointer border-x-0 border-b-2 border-t-0 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight hover:isolate hover:border-x-0 hover:bg-neutral-100 dark:hover:bg-transparent focus:isolate	Sets default styles for the `TETabsItem` link when it is tab.
`verticalTabsItem`	flex-grow text-center	Sets wrapper styles to the `TETabsItem` component when it is vertical tab.

TETabsPane

Name	Default	Description
`activeTabsPane`	opacity-100	Adds opacity styles to the `TETabsPane` component when it is active.
`inactiveTabsPane`	opacity-0	Adds opacity styles to the `TETabsPane` component when it is inactive.
`isHidden`	hidden	Adds display styles to the `TETabsPane` component when it is hidden.
`isShown`	block	Adds display styles to the `TETabsPane` component when it is shown.
`tabsPane`	transition-opacity duration-150 ease-linear	Adds transition styles to the `TETabsPane` component.

Events

TETabsItem

Name	Description
`onHide`	A callback fired when the `TETabsPane` is hidden.
`onHidden`	A callback fired when the `TETabsPane` is hidden (will wait for CSS transitions to complete).
`onShow`	A callback fired when the `TETabsPane` is shown.
`onShown`	A callback fired when the `TETabsPane` is shown (will wait for CSS transitions to complete).

        
            
        import React, { useState } from "react";
        import {
          TETabs,
          TETabsContent,
          TETabsItem,
          TETabsPane,
        } from "tw-elements-react";
        
        export default function TabsBasicExample(): JSX.Element {
          const [basicActive, setBasicActive] = useState("tab1");
        
          const handleBasicClick = (value: string) => {
            if (value === basicActive) {
              return;
            } 
            setBasicActive(value);
          };

          const handleBasicHide = () => {
            console.log("hide");
          };

          const handleBasicShow = () => {
            console.log("show");
          };
        
          return (
            <div className="mb-3">
              <TETabs pills>
                <TETabsItem
                  onClick={() => handleBasicClick("tab1")}
                  active={basicActive === "tab1"}
                >
                  Home
                </TETabsItem>
                <TETabsItem
                  onClick={() => handleBasicClick("tab2")}
                  active={basicActive === "tab2"}
                >
                  Profile
                </TETabsItem>
                <TETabsItem
                  onClick={() => handleBasicClick("tab3")}
                  active={basicActive === "tab3"}
                >
                  Messages
                </TETabsItem>
                <TETabsItem
                  onClick={() => handleBasicClick("tab4")}
                  active={basicActive === "tab4"}
                  disabled
                >
                  Contact
                </TETabsItem>
              </TETabs>
        
              <TETabsContent>
                <TETabsPane show={basicActive === "tab1"} onHide={handleBasicHide}>Tab 1 content</TETabsPane>
                <TETabsPane show={basicActive === "tab2"} onShow={handleBasicShow}>Tab 2 content</TETabsPane>
                <TETabsPane show={basicActive === "tab3"}>Tab 3 content</TETabsPane>
                <TETabsPane show={basicActive === "tab4"}>Tab 4 content</TETabsPane>
              </TETabsContent>
            </div>
          );
        }

Pills

Basic example

Fill

Justify

Vertical

With buttons

Color options

Related resources

Pills - API

Import

Properties

TETabs

TETabsContent

TETabsItem

TETabsPane

Classes

TETabs

TETabsContent

TETabsItem

TETabsPane

Events

TETabsItem