Tab
Basic Tab

The "Basic Tab" component provides a simple and intuitive way to create tabbed content for your web applications. Easily organize and display information in a clean tabbed interface.

Example code / preview
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            
                HTMLOpenTagdiv HTMLCloseTag
    HTMLOpenTagul
    data-tw-merge
    role="tablist"
    class="border-b border-slate-200 dark:border-darkmode-400 w-full flex"
HTMLCloseTag
    HTMLOpenTagli
    id="example-1-tab"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1 -mb-px"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-1"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent active w-full py-2"
    HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
                                                        HTMLOpenTagli
    id="example-2-tab"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1 -mb-px"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-2"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white block border-transparent rounded-t-md dark:border-transparent [&.active]:bg-white [&.active]:border-slate-200 [&.active]:border-b-transparent [&.active]:font-medium [&.active]:dark:bg-transparent [&.active]:dark:border-t-darkmode-400 [&.active]:dark:border-b-darkmode-600 [&.active]:dark:border-x-darkmode-400 [&:not(.active)]:hover:bg-slate-100 [&:not(.active)]:dark:hover:bg-darkmode-400 [&:not(.active)]:dark:hover:border-transparent w-full py-2"
    HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
                                                    HTMLOpenTagdiv
    class="tab-content border-b border-l border-r"HTMLCloseTag
    HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-1" role="tabpanel" aria-labelledby="example-1-tab" class="tab-pane active p-5 leading-relaxed"
    HTMLCloseTagLorem Ipsum is simply dummy text of the printing and
                                                            typesetting industry. Lorem Ipsum has been the
                                                            industry's standard dummy text ever since the 1500s,
                                                            when an unknown printer took a galley of type and
                                                            scrambled it to make a type specimen book. It has
                                                            survived not only five centuries, but also the leap
                                                            into electronic typesetting, remaining essentially
                                                            unchanged. It was popularised in the 1960s with the
                                                            release of Letraset sheets containing Lorem Ipsum
                                                            passages, and more recently with desktop publishing
                                                            software like Aldus PageMaker including versions of
                                                            Lorem Ipsum.HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-2" role="tabpanel" aria-labelledby="example-2-tab" class="tab-pane p-5 leading-relaxed"
    HTMLCloseTagIt is a long established fact that a reader will be
                                                            distracted by the readable content of a page when
                                                            looking at its layout. The point of using Lorem Ipsum
                                                            is that it has a more-or-less normal distribution of
                                                            letters, as opposed to using 'Content here, content
                                                            here', making it look like readable English. Many
                                                            desktop publishing packages and web page editors now
                                                            use Lorem Ipsum as their default model text, and a
                                                            search for 'lorem ipsum' will uncover many web sites
                                                            still in their infancy. Various versions have evolved
                                                            over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
Boxed Tab

The "Boxed Tab" component offers a unique tabbed interface with a boxed appearance. It's an excellent choice when you want to display tabbed content in a distinct style.

Example code / preview
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            
                HTMLOpenTagdiv HTMLCloseTag
    HTMLOpenTagul
    data-tw-merge
    role="tablist"
    class="p-0.5 border bg-slate-50/70 border-slate-200/70 rounded-lg dark:border-darkmode-400 w-full flex"
HTMLCloseTag
    HTMLOpenTagli
    id="example-5-tab"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-5"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white rounded-md py-1.5 dark:border-transparent [&.active]:text-slate-700 [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 active w-full py-2"
    HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
                                                        HTMLOpenTagli
    id="example-6-tab"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-6"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white rounded-md py-1.5 dark:border-transparent [&.active]:text-slate-700 [&.active]:border [&.active]:shadow-sm [&.active]:font-medium [&.active]:border-slate-200 [&.active]:bg-white [&.active]:dark:text-slate-300 [&.active]:dark:bg-darkmode-400 [&.active]:dark:border-darkmode-400 w-full py-2"
    HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
                                                    HTMLOpenTagdiv
    class="tab-content mt-5"HTMLCloseTag
    HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-5" role="tabpanel" aria-labelledby="example-5-tab" class="tab-pane active leading-relaxed"
    HTMLCloseTagLorem Ipsum is simply dummy text of the printing and
                                                            typesetting industry. Lorem Ipsum has been the
                                                            industry's standard dummy text ever since the 1500s,
                                                            when an unknown printer took a galley of type and
                                                            scrambled it to make a type specimen book. It has
                                                            survived not only five centuries, but also the leap
                                                            into electronic typesetting, remaining essentially
                                                            unchanged. It was popularised in the 1960s with the
                                                            release of Letraset sheets containing Lorem Ipsum
                                                            passages, and more recently with desktop publishing
                                                            software like Aldus PageMaker including versions of
                                                            Lorem Ipsum.HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-6" role="tabpanel" aria-labelledby="example-6-tab" class="tab-pane leading-relaxed"
    HTMLCloseTagIt is a long established fact that a reader will be
                                                            distracted by the readable content of a page when
                                                            looking at its layout. The point of using Lorem Ipsum
                                                            is that it has a more-or-less normal distribution of
                                                            letters, as opposed to using 'Content here, content
                                                            here', making it look like readable English. Many
                                                            desktop publishing packages and web page editors now
                                                            use Lorem Ipsum as their default model text, and a
                                                            search for 'lorem ipsum' will uncover many web sites
                                                            still in their infancy. Various versions have evolved
                                                            over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
Link Tab

The "Link Tab" component provides a clean and simple tabbed interface with link-like buttons. It's a great choice when you want to present tabbed content with a minimalist design.

Example code / preview
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
            
                HTMLOpenTagdiv HTMLCloseTag
    HTMLOpenTagul
    data-tw-merge
    role="tablist"
    class="w-full flex"
HTMLCloseTag
    HTMLOpenTagli
    id="example-9-tab"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-9"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white border-b-2 border-transparent dark:border-transparent [&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary active w-full py-2"
    HTMLCloseTagExample Tab 1HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
                                                        HTMLOpenTagli
    id="example-1-tab0"
    data-tw-merge
    role="presentation"
    class="focus-visible:outline-none flex-1"
HTMLCloseTag
    HTMLOpenTagbutton
        data-tw-merge
        data-tw-target="#example-10"
        role="tab"
        class="cursor-pointer block appearance-none px-3 py-2 border border-transparent text-slate-600 transition-colors dark:text-slate-400 [&.active]:text-slate-700 [&.active]:dark:text-white border-b-2 border-transparent dark:border-transparent [&.active]:border-b-primary [&.active]:font-medium [&.active]:dark:border-b-primary w-full py-2"
    HTMLCloseTagExample Tab 2HTMLOpenTag/buttonHTMLCloseTag
HTMLOpenTag/liHTMLCloseTag
HTMLOpenTag/ulHTMLCloseTag
                                                    HTMLOpenTagdiv
    class="tab-content mt-5"HTMLCloseTag
    HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-9" role="tabpanel" aria-labelledby="example-9-tab" class="tab-pane active leading-relaxed"
    HTMLCloseTagLorem Ipsum is simply dummy text of the printing and
                                                            typesetting industry. Lorem Ipsum has been the
                                                            industry's standard dummy text ever since the 1500s,
                                                            when an unknown printer took a galley of type and
                                                            scrambled it to make a type specimen book. It has
                                                            survived not only five centuries, but also the leap
                                                            into electronic typesetting, remaining essentially
                                                            unchanged. It was popularised in the 1960s with the
                                                            release of Letraset sheets containing Lorem Ipsum
                                                            passages, and more recently with desktop publishing
                                                            software like Aldus PageMaker including versions of
                                                            Lorem Ipsum.HTMLOpenTag/divHTMLCloseTag
                                                        HTMLOpenTagdiv
        data-transition
        data-selector=".active"
        data-enter="transition-[visibility,opacity] ease-linear duration-150"
        data-enter-from="!p-0 !h-0 overflow-hidden invisible opacity-0"
        data-enter-to="visible opacity-100"
        data-leave="transition-[visibility,opacity] ease-linear duration-150"
        data-leave-from="visible opacity-100"
        data-leave-to="!p-0 !h-0 overflow-hidden invisible opacity-0"
        id="example-10" role="tabpanel" aria-labelledby="example-10-tab" class="tab-pane leading-relaxed"
    HTMLCloseTagIt is a long established fact that a reader will be
                                                            distracted by the readable content of a page when
                                                            looking at its layout. The point of using Lorem Ipsum
                                                            is that it has a more-or-less normal distribution of
                                                            letters, as opposed to using 'Content here, content
                                                            here', making it look like readable English. Many
                                                            desktop publishing packages and web page editors now
                                                            use Lorem Ipsum as their default model text, and a
                                                            search for 'lorem ipsum' will uncover many web sites
                                                            still in their infancy. Various versions have evolved
                                                            over the years, sometimes by accident, sometimes on
                                                            purpose (injected humour and the like).HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
Component API

In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.

Below is a list of props that can be passed to the component:

Tab
Prop Type Description
`fullWidth` `boolean` Whether the tab should span full width.
Tab.Button
Prop Type Description
`as` `string` Element type (e.g., "a", "button") for the tab button.
Tab.Group
Prop Type Description
No spesific props
Tab.List
Prop Type Description
`variant` `tabs`, `pills`, `boxed-tabs`, `link-tabs` Sets the variant style for the table head (default is "tabs").
Tab.Panels
Prop Type Description
No spesific props
Tab.Panel
Prop Type Description
No spesific props