Tabs

Import

import { Tabs } from '@darkcode-ui/react';

Usage

import {Tabs} from "@darkcode-ui/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 '@darkcode-ui/react';

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

Vertical

import {Tabs} from "@darkcode-ui/react";

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

Disabled Tab

import {Tabs} from "@darkcode-ui/react";

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

With Separator

Add <Tabs.Separator /> inside each <Tabs.Tab> (except the first) to display separator lines between tabs.

import {Tabs} from "@darkcode-ui/react";

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

Sizes

Use the size prop to render sm, md (default), or lg tabs.

import {Tabs} from "@darkcode-ui/react";

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {

Ghost

Use variant="ghost" for a transparent container with an accent-colored selection indicator — ideal for inline or minimal UI contexts where the tabs shouldn't draw attention to themselves.

import {Tabs} from "@darkcode-ui/react";

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

Two Items

A segmented control works well for toggling between just two mutually exclusive options.

import {Tabs} from "@darkcode-ui/react";

export function TwoItems() {
  return (
    <Tabs className="w-full max-w-[280px]" defaultSelectedKey="monthly">

With Icons

Place an icon alongside the label inside each <Tabs.Tab>.

import {Tabs} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

const items = [
  {icon: "gravity-ui:square-dashed", id: "overview", label: "Overview"},

Icon Expand

Use a render function on <Tabs.Tab> to show only the icon for unselected tabs and the icon + label for the selected one. Combine with variant="ghost" and className="w-auto" so each tab sizes to its content.

"use client";

import {Tabs} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

Custom Styles

import {Tabs} from "@darkcode-ui/react";

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

Secondary Variant

import {Tabs} from "@darkcode-ui/react";

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

Secondary Variant Vertical

import {Tabs} from "@darkcode-ui/react";

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

Custom Render Function

"use client";

import {Tabs} from "@darkcode-ui/react";
import Link from "next/link";

Styling

Passing Tailwind CSS classes

import { Tabs } from '@darkcode-ui/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__separator - Separator between tabs
• .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

Size Classes

• .tabs--sm - Small size (28px tab height)
• .tabs--lg - Large size (40px tab height)

Medium is the default size and is defined in the base .tabs__tab styles.

Variant Classes

• .tabs--secondary - Secondary variant with underline indicator
• .tabs--ghost - Ghost variant (transparent container, accent-colored indicator)

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.Separator Props

Tabs.Panel Props