# Tabs **Category**: react **URL**: https://ui.darkcode.dev/en/docs/react/components/tabs **Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(navigation)/tabs.mdx > Tabs organize content into multiple sections and allow users to navigate between them. *** ## Import ```tsx import { Tabs } from '@darkcode-ui/react'; ``` ### Usage ### Anatomy Import the Tabs component and access all parts using dot notation. ```tsx import { Tabs } from '@darkcode-ui/react'; export default () => ( {/* Optional */} ) ``` ### Vertical ### Disabled Tab ### With Separator Add `` inside each `` (except the first) to display separator lines between tabs. ### Sizes Use the `size` prop to render `sm`, `md` (default), or `lg` tabs. ### 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. ### Two Items A segmented control works well for toggling between just two mutually exclusive options. ### With Icons Place an icon alongside the label inside each ``. ### Icon Expand Use a render function on `` 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. ### Custom Styles ### Secondary Variant ### Secondary Variant Vertical ## Related Components - **Breadcrumbs**: Display the user's current location within a hierarchy - **Stepper**: Step-by-step progress indicator for multi-step flows ### Custom Render Function ```tsx "use client"; import {Tabs} from "@darkcode-ui/react"; import Link from "next/link"; export function CustomRenderFunction() { return (
}> } > Getting Started } > Components } > Releases

View your project overview and recent activity.

Track your metrics and analyze performance data.

Generate and download detailed reports.

 ); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Tabs } from '@darkcode-ui/react'; function CustomTabs() { return ( Daily Weekly Bi-Weekly Monthly

Daily

Manage your daily tasks and goals.

Weekly

Manage your weekly tasks and goals.

Bi-Weekly

Manage your bi-weekly tasks and goals.

Monthly

Manage your monthly tasks and goals.

 ); } ``` ### 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 | Prop | Type | Default | Description | |------|------|---------|-------------| | `variant` | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Visual style variant. Primary uses a filled indicator, secondary uses an underline indicator, ghost uses a transparent container with an accent indicator | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size of the tabs | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Tab layout orientation | | `selectedKey` | `string` | - | Controlled selected tab key | | `defaultSelectedKey` | `string` | - | Default selected tab key | | `onSelectionChange` | `(key: Key) => void` | - | Selection change handler | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.List Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `aria-label` | `string` | - | Accessibility label for tab list | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.Tab Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `id` | `string` | - | Unique tab identifier | | `isDisabled` | `boolean` | `false` | Whether tab is disabled | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.Separator Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes | ### Tabs.Panel Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `id` | `string` | - | Panel identifier matching tab id | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.|