Surfacesduskmoonimplemented8 demos

Collapse

Collapse hides and reveals optional sections without leaving the current page.

Import@duskmoon-dev/components/collapse

4API sections

14documented props

6behavior scenarios

Key API

itemsactiveKeydefaultActiveKeyonChangeaccordionbordered

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

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

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

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

Covered behavior

Renders item labels with DuskMoon collapse classes

Feature Demos

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

Preview

DuskMoon React components provide typed, themeable UI primitives.

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function Example() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Renders item labels with DuskMoon collapse classes

test-backed

Collapse scenario from the component test coverage: renders item labels with duskmoon collapse classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseRendersItemLabelsWithDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Supports default active key

test-backed

Collapse scenario from the component test coverage: supports default active key.

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseSupportsDefaultActiveKeyDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Supports className and toggles panels

test-backed

Collapse scenario from the component test coverage: supports classname and toggles panels.

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseSupportsClassNameAndTogglesDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Supports accordion onChange

test-backed

Collapse scenario from the component test coverage: supports accordion onchange.

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseSupportsAccordionOnChangeDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Supports size, ghost, and disabled item classes

test-backed

Collapse scenario from the component test coverage: supports size, ghost, and disabled item classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseSupportsSizeGhostAndDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

DuskMoon React components provide typed, themeable UI primitives.

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Collapse } from "@duskmoon-dev/components/collapse";

export function CollapseForwardsRootRefDemo() {
  return (<Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>);
}

Preview

Sunshine Theme

DuskMoon React components provide typed, themeable UI primitives.

Moonlight Theme

DuskMoon React components provide typed, themeable UI primitives.

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">
  <Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Collapse
  defaultActiveKey="intro"
  items={[
    {
      key: "intro",
      label: "What is DuskMoon?",
      children: "DuskMoon React components provide typed, themeable UI primitives."
    }
  ]}
/>
</div>

API

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

Types: packages/components/src/components/collapse/Collapse.types.tsScenarios: packages/components/src/components/collapse/Collapse.test.tsx

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

Prop	Type	Required	Description
`items`	`CollapseItem[]`	No	items configures Collapse.
`activeKey`	`CollapseKey \| CollapseKey[]`	No	activeKey configures Collapse.
`defaultActiveKey`	`CollapseKey \| CollapseKey[]`	No	defaultActiveKey configures Collapse.
`onChange`	`(key: CollapseKey \| CollapseKey[]) => void`	No	onChange configures Collapse.
`accordion`	`boolean`	No	accordion configures Collapse.
`bordered`	`boolean`	No	bordered configures Collapse.
`ghost`	`boolean`	No	ghost configures Collapse.
`size`	`CollapseSize`	No	size configures Collapse.
`children`	`ReactNode`	No	children configures Collapse.

CollapseIteminterface

Prop	Type	Required	Description
`key`	`CollapseKey`	Yes	key configures Collapse.
`label`	`ReactNode`	Yes	label configures Collapse.
`children`	`ReactNode`	No	children configures Collapse.
`disabled`	`boolean`	No	disabled configures Collapse.
`className`	`string`	No	className configures Collapse.

CollapseKeytype

string | number

CollapseSizetype

"sm" | "md" | "lg"