Tabs

React Tabs components are used to organize related content into separate panels that share the same context. They are commonly used in dashboards, settings pages, profile views, and any interface where users need to switch between sections without leaving the page.

This Tabs component is built with React and styled using Tailwind CSS. It supports multiple visual variants, icons, badges, and vertical or horizontal layouts while keeping tab behavior accessible and predictable.

Installation

npx @tailgrids/cli add tabs

Anatomy

Import the tab parts and compose them to build the layout.

import { TabRoot, TabList, TabTrigger, TabContent } from "@/registry/core/tabs";

export default TabsExample = () => (
  <TabRoot defaultValue="tab1">
    <TabList>
      <TabTrigger value="tab1" />
      <TabTrigger value="tab2" />
    </TabList>
    <TabContent value="tab1" />
    <TabContent value="tab2" />
  </TabRoot>
);

Usage

Import the components and use the default variant to create a standard tabbed interface.

import { TabContent, TabList, TabRoot, TabTrigger } from "@/registry/core/tabs";

export default function TabsExample() {
  return (
    <TabRoot defaultValue="overview">
      <TabList>
        <TabTrigger value="overview">Overview</TabTrigger>
        <TabTrigger value="analytics">Analytics</TabTrigger>
        <TabTrigger value="reports">Reports</TabTrigger>
      </TabList>
      <TabContent value="overview">
        <p>Overview content goes here.</p>
      </TabContent>
      <TabContent value="analytics">
        <p>Analytics content goes here.</p>
      </TabContent>
      <TabContent value="reports">
        <p>Reports content goes here.</p>
      </TabContent>
    </TabRoot>
  );
}

Note: Only one tab panel is visible at a time. The defaultValue prop sets the initially active tab.

Examples

Variants

Use the variant prop to control the visual style of the tab list. Supported values are default and minimal.

With Icons

You can pass an icon prop to the TabTrigger to display an icon before the tab label.

Note: Icons are automatically sized to 20px (1.25rem).

With Badges

Use the badge prop on TabTrigger to display a notification count or status indicator next to the label.

Note: Badges use the Badge component with primary color.

Horizontal Direction

Set the direction prop to horizontal on TabRoot to stack the tab list and content vertically, with tabs arranged horizontally.

Note: Horizontal direction is responsive and wraps on small screens. The tab list scrolls horizontally if tabs overflow.

Custom

You can customize the tab appearance using standard Tailwind CSS classes.

API Reference

TabRoot

The root container for tabs. Extends div element props.

TabList

Container for tab triggers. Extends div element props.

TabTrigger

Individual tab button. Extends button element props.

TabContent

Content panel for each tab. Extends div element props.

Accessibility

• Uses proper ARIA attributes (role="tab", role="tabpanel", aria-selected, aria-controls, aria-labelledby)
• Keyboard accessible with standard tab navigation
• Active tab is clearly indicated with visual styling
• Content panels are properly associated with their triggers
• Hidden content uses hidden attribute for screen readers
• Auto-generated unique IDs ensure proper associations