Navigationduskmoonimplemented9 demos

Tabs

Tabs switches between related content panels in the same context.

Import@duskmoon-dev/components/tabs

10API sections

34documented props

7behavior scenarios

Key API

itemsactiveKeydefaultActiveKeyonChangeonTabClicktabPosition

Usage

When to use

Use it when users need to move between sections, pages, steps, or contextual actions.
Expose current and disabled state so navigation remains clear to keyboard and screen-reader users.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Wayfinding

Covers the route, section, step, or action-list patterns that help users move through an interface.

Current state

Shows selected, active, open, or current props where the component exposes them.

Primary API surface

Tabs is most often configured through `items`, `activeKey`, `defaultActiveKey`, `onChange`.

Covered behavior

Renders items with DuskMoon tab classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Tabs organize related views.

Basic usage

authored

Import the component stylesheet and Tabs from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function Example() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Renders items with DuskMoon tab classes

test-backed

Tabs scenario from the component test coverage: renders items with duskmoon tab classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsRendersItemsWithDuskMoonDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Supports default active key and onChange

test-backed

Tabs scenario from the component test coverage: supports default active key and onchange.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsSupportsDefaultActiveKeyDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Supports controlled active key

test-backed

Tabs scenario from the component test coverage: supports controlled active key.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsSupportsControlledActiveKeyDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Supports tab position, type, size, and className

test-backed

Tabs scenario from the component test coverage: supports tab position, type, size, and classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsSupportsTabPositionTypeDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Supports editable add and close callbacks

test-backed

Tabs scenario from the component test coverage: supports editable add and close callbacks.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsSupportsEditableAddAndDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Supports TabPane compatibility

test-backed

Tabs scenario from the component test coverage: supports tabpane compatibility.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsSupportsTabPaneCompatibilityDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Tabs organize related views.

Forwards root ref

test-backed

Tabs scenario from the component test coverage: forwards root ref.

Source

import "@duskmoon-dev/components/styles.css";
import { Tabs } from "@duskmoon-dev/components/tabs";

export function TabsForwardsRootRefDemo() {
  return (<Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>);
}

Preview

Sunshine Theme

Tabs organize related views.

Moonlight Theme

Tabs organize related views.

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Tabs
  defaultActiveKey="usage"
  items={[
    { key: "overview", label: "Overview", children: "Component status overview." },
    { key: "usage", label: "Usage", children: "Tabs organize related views." },
    { key: "api", label: "API", children: "Document props and events." }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Tabs. Start with `items`, `activeKey`, `defaultActiveKey`, `onChange` for common usage.

Types: packages/components/src/components/tabs/Tabs.types.tsScenarios: packages/components/src/components/tabs/Tabs.test.tsx

TabsPropsinterface extends Omit< ComponentProps<"div">, "children" | "onChange" >

Prop	Type	Required	Description
`items`	`TabsItem[]`	No	items configures Tabs.
`activeKey`	`TabsKey`	No	activeKey configures Tabs.
`defaultActiveKey`	`TabsKey`	No	defaultActiveKey configures Tabs.
`onChange`	`(activeKey: TabsKey) => void`	No	onChange configures Tabs.
`onTabClick`	`(activeKey: TabsKey, event: MouseEvent<HTMLElement>) => void`	No	onTabClick configures Tabs.
`tabPosition`	`TabsPosition`	No	tabPosition configures Tabs.
`type`	`TabsType`	No	type configures Tabs.
`size`	`TabsSize`	No	size configures Tabs.
`hideAdd`	`boolean`	No	hideAdd configures Tabs.
`addIcon`	`ReactNode`	No	addIcon configures Tabs.
`removeIcon`	`ReactNode`	No	removeIcon configures Tabs.
`onEdit`	`TabsOnEdit`	No	onEdit configures Tabs.
`destroyInactiveTabPane`	`boolean`	No	destroyInactiveTabPane configures Tabs.
`centered`	`boolean`	No	centered configures Tabs.
`children`	`ReactNode`	No	children configures Tabs.

TabsIteminterface

Prop	Type	Required	Description
`key`	`TabsKey`	Yes	key configures Tabs.
`label`	`ReactNode`	No	label configures Tabs.
`children`	`ReactNode`	No	children configures Tabs.
`icon`	`ReactNode`	No	icon configures Tabs.
`disabled`	`boolean`	No	disabled configures Tabs.
`closable`	`boolean`	No	closable configures Tabs.
`closeIcon`	`ReactNode`	No	closeIcon configures Tabs.
`forceRender`	`boolean`	No	forceRender configures Tabs.
`destroyInactiveTabPane`	`boolean`	No	destroyInactiveTabPane configures Tabs.
`className`	`string`	No	className configures Tabs.
`style`	`CSSProperties`	No	style configures Tabs.

TabPanePropsinterface extends Omit<ComponentProps<"div">, "tab">

Prop	Type	Required	Description
`tab`	`ReactNode`	No	tab configures Tabs.
`label`	`ReactNode`	No	label configures Tabs.
`icon`	`ReactNode`	No	icon configures Tabs.
`disabled`	`boolean`	No	disabled configures Tabs.
`closable`	`boolean`	No	closable configures Tabs.
`closeIcon`	`ReactNode`	No	closeIcon configures Tabs.
`forceRender`	`boolean`	No	forceRender configures Tabs.
`children`	`ReactNode`	No	children configures Tabs.

TabsKeytype

string

TabsPositiontype

"top" | "right" | "bottom" | "left"

TabsTypetype

"line" | "card" | "editable-card"

TabsSizetype

"small" | "middle" | "large" | "sm" | "md" | "lg"

TabsEditActiontype

"add" | "remove"

TabsEditEventtype

MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>

TabsOnEdittype

( targetKey: TabsKey | TabsEditEvent, action: TabsEditAction, ) => void