TabsUpdated

Import

import { Tabs } from '@heroui/react';

Usage

import {Tabs} from "@heroui/react";

export function Basic() {
  return (
    <Tabs className="w-full max-w-md">

Anatomy

Import the Tabs component and access all parts using dot notation.

import { Tabs } from '@heroui/react';

export default () => (
  <Tabs>
    <Tabs.ListContainer>
      <Tabs.List aria-label="Options">
        <Tabs.Tab>
          <Tabs.Indicator />
        </Tabs.Tab>
      </Tabs.List>
    </Tabs.ListContainer>
    <Tabs.Panel/>
  </Tabs>
)

Vertical

import {Tabs} from "@heroui/react";

export function Vertical() {
  return (
    <Tabs className="w-full max-w-lg" orientation="vertical">

Disabled Tab

import {Tabs} from "@heroui/react";

export function Disabled() {
  return (
    <Tabs className="w-full max-w-md">

Custom Styles

import {Tabs} from "@heroui/react";

export function CustomStyles() {
  return (
    <Tabs className="w-full max-w-lg text-center">

Styling

Passing Tailwind CSS classes

import { Tabs } from '@heroui/react';

function CustomTabs() {
return (
  <Tabs className="w-full max-w-lg text-center">

CSS Classes

The Tabs component uses these CSS classes:

Base Classes

• .tabs - Base tabs container
• .tabs__list-container - Tab list container wrapper
• .tabs__list - Tab list container
• .tabs__tab - Individual tab button
• .tabs__panel - Tab panel content
• .tabs__indicator - Tab indicator

Orientation Attributes

• .tabs[data-orientation="horizontal"] - Horizontal tab layout (default)
• .tabs[data-orientation="vertical"] - Vertical tab layout

Interactive States

The component supports both CSS pseudo-classes and data attributes:

• Selected: [aria-selected="true"]
• Hover: :hover or [data-hovered="true"]
• Focus: :focus-visible or [data-focus-visible="true"]
• Disabled: [aria-disabled="true"]

API Reference

Tabs Props

Tabs.List Props

Tabs.Tab Props

Tabs.Panel Props