search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
    • Overview
    • API

    Tabs

    Tailwind CSS React Tabs

    Responsive Tabs built with Tailwind CSS React. Learn how to use tabs to create content that can be hidden & activated onclick, examples like switch, vertical & more.


    Basic example

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

    Use useState to connect TETabs with TETabsContent.

    Loading...
    • JSX
            
                
          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);
            };
          
            return (
              <div className="mb-3">
                <TETabs>
                  <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 tabs item has the same width.

    Loading...
    • JSX
            
                
          import React, { useState } from "react";
          import {
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane,
          } from "tw-elements-react";
          
          export default function TabsFill(): JSX.Element {
            const [fillActive, setFillActive] = useState("tab1");
          
            const handleFillClick = (value: string) => {
              if (value === fillActive) {
                return;
              } 
              setFillActive(value);
            };
          
            return (
              <div className="mb-3">
                <TETabs 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.

    Loading...
    • JSX
            
                
          import React, { useState } from "react";
          import {
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane,
          } from "tw-elements-react";
          
          export default function TabsJustify(): JSX.Element {
            const [justifyActive, setJustifyActive] = useState("tab1");
          
            const handleJustifyClick = (value: string) => {
              if (value === justifyActive) {
                return;
              } 
              setJustifyActive(value);
            };
          
            return (
              <div className="mb-3">
                <TETabs 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 tabs by using vertical property. Add also classes flex items-start to the wrapper div.

    Loading...
    • jsx
            
                
          import React, { useState } from "react";
          import {
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane,
          } from "tw-elements-react";
          
          export default function TabsVertical(): JSX.Element {
            const [verticalActive, setVerticalActive] = useState("tab1");
          
            const handleVerticalClick = (value: string) => {
              if (value === verticalActive) {
                return;
              } 
              setVerticalActive(value);
            };
          
            return (
              <div className="flex items-start">
                <TETabs 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 instead of tabs to change the visible content.

    Loading...
    • JSX
            
                
          import React, { useState } from "react";
          import {
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane,
          } from "tw-elements-react";
          
          export default function TabsWithButtons(): JSX.Element {
            const [buttonActive, setButtonActive] = useState("tab1");
          
            const handleButtonClick = (value: string) => {
              if (value === buttonActive) {
                return;
              } 
              setButtonActive(value);
            };
          
            return (
              <div className="mb-3">
                <TETabs>
                  <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 tabs (e.g. TETabsItem color="primary").

    Loading...
    • JSX
            
                
          import React, { useState } from "react";
          import {
            TETabs,
            TETabsContent,
            TETabsItem,
            TETabsPane,
          } from "tw-elements-react";
          
          export default function TabsColors(): 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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
                  <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>
            );
          }      
          
            
        

    Related resources

    Button Group Button

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

    • Basic example
    • Fill
    • Justify
    • Vertical
    • With buttons
    • Color options
    • Related resources

    Tabs - API


    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

    TETabsPane

    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).
    • JSX
            
                
            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>
                    <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>
              );
            }        
            
            
        
    • Import
    • Properties
    • Classes
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com