Tabs | Namespace UIKit

Import

import { Tabs } from "@thenamespace/uikit";

Usage

Overview

Analytics

Reports

View your project overview and recent activity.

import { Tabs } from "@thenamespace/uikit";

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 "@thenamespace/uikit";

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>
);

Account Settings

Manage your account information and preferences.

import { Tabs } from "@thenamespace/uikit";

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

When the tab list exceeds the available space, Tabs.ListContainer automatically renders scroll chevrons and fading edges so users can navigate the hidden tabs. This works the same way for both horizontal and vertical orientations.

Overview

Analytics

Reports

Performance

Engagement

Audience

Acquisition

Retention

Settings

Overview panel content.

import { Tabs } from "@thenamespace/uikit";

const items = [
  { id: "overview", label: "Overview" },
  { id: "analytics", label: "Analytics" },

Disabled Tab

Active

Disabled

Available

This tab is active and can be selected.

import { Tabs } from "@thenamespace/uikit";

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.

Overview

Analytics

Reports

View your project overview and recent activity.

import { Tabs } from "@thenamespace/uikit";

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

Custom Styles

Daily

Weekly

Bi-Weekly

Monthly

import { Tabs } from "@thenamespace/uikit";

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

Secondary Variant

Overview

Analytics

Reports

View your project overview and recent activity.

import { Tabs } from "@thenamespace/uikit";

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

Secondary Variant Vertical

Account

Security

Notifications

Billing

Account Settings

Manage your account information and preferences.

import { Tabs } from "@thenamespace/uikit";

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

Custom Render Function

Getting Started

Components Themes

"use client";

import {Tabs} from "@thenamespace/uikit";
import Link from "next/link";

Styling

Passing Tailwind CSS classes

import { Tabs } from '@thenamespace/uikit';

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

Variant Classes

.tabs--secondary - Secondary variant with underline 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"`	`"primary"`	Visual style variant. Primary uses a filled indicator, secondary uses an underline indicator
`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<keyof React.JSX.IntrinsicElements, TabsRenderProps>`	-	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<keyof React.JSX.IntrinsicElements, TabListRenderProps>`	-	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<keyof React.JSX.IntrinsicElements, TabRenderProps>`	-	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<keyof React.JSX.IntrinsicElements, TabPanelRenderProps>`	-	Overrides the default DOM element with a custom render function.