Tabs

Documentation for the <Tabs /> component. Learn about the available props and how to use it.

Installation#

Tabs is part of a set of unstyled and fully accessible components created by Headless UI.
See the Headless UI documentation to learn more.

To get started, install Headless UI via yarn.

# Yarn

yarn add @headlessui/react

Basic Example#

Tabs organize content and make it easy to switch between different views or sets of data.

According to Headless UI, Tabs are built using the Tab.Group, Tab.List, Tab, Tab.Panels, and Tab.Panel components. The first tab is selected by default; it can be changed by clicking on any of them, or by selecting it with the keyboard.

import { Tab } from "@headlessui/react";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Tab.Group>
        <Tab.List>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>Content 1</Tab.Panel>
          <Tab.Panel>Content 2</Tab.Panel>
          <Tab.Panel>Content 3</Tab.Panel>
        </Tab.Panels>
      </Tab.Group>

      {/* ... */}
    </main>
  )
}

The previous example describes the simplest way of using the Tab component, it uses default props and renders a component like the following:

Styling the component#

Custom styles#

Tabs can be customized through the prop className. Headless UI already provides de selected value to custom styles for selected tabs.

import { Tab } from "@headlessui/react";
import cn from "classnames";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Tab.Group>
        <Tab.List>
          <Tab
            className={({selected}) => cn(
              "justify-center items-center py-3",
              "font-montserrat text-surface-600 text-base text-center",
              "border-b-2 leading-6 border-surface-100 w-40 h-12",
              { ["font-bold text-primary-500 border-primary-500"]: selected }
            )}
          >
            Title
          </Tab>
          <Tab
            className={({selected}) => cn(
              "justify-center items-center py-3",
              "font-montserrat text-surface-600 text-base text-center",
              "border-b-2 leading-6 border-surface-100 w-40 h-12",
              { ["font-bold text-primary-500 border-primary-500"]: selected }
            )}
          >
            Title
          </Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>
            ...
          </Tab.Panel>
          <Tab.Panel>
            ...
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>

      {/* ... */}
    </main>
  )
}

Disabled tab#

import { Tab } from "@headlessui/react";
import cn from "classnames";

function IndexPage() {

  return (
    <main>
      {/* ... */}

      <Tab.Group>
        <Tab.List>
          <Tab
            className={({selected}) => cn(
              "justify-center items-center py-3",
              "font-montserrat text-surface-600 text-base text-center",
              "border-b-2 leading-6 border-surface-100 w-40 h-12",
              { ["font-bold text-primary-500 border-primary-500"]: selected }
            )}
          >
            Title
          </Tab>
          <Tab
            className={({selected}) => cn(
              "justify-center items-center py-3",
              "font-montserrat text-surface-600 text-base text-center",
              "border-b-2 leading-6 border-surface-100 w-40 h-12",
              { ["font-bold text-primary-500 border-primary-500"]: selected }
            )}
            disabled
          >
            Title
          </Tab>
        </Tab.List>
        <Tab.Panels>
          <Tab.Panel>
            ...
          </Tab.Panel>
          <Tab.Panel>
            ...
          </Tab.Panel>
        </Tab.Panels>
      </Tab.Group>

      {/* ... */}
    </main>
  )
}

To customize and learn more about the Tab component and its props see the Headless UI documentation.