Data Displayduskmoonimplemented7 demos

Descriptions

Descriptions presents labeled record fields for summaries, details, and review screens.

Import@duskmoon-dev/components/descriptions

11API sections

22documented props

5behavior scenarios

Key API

titleextraitemsborderedsizecolumn

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

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

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Descriptions is most often configured through `title`, `extra`, `items`, `bordered`.

Covered behavior

Renders title and children items

Feature Demos

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

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function Example() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Renders title and children items

test-backed

Descriptions scenario from the component test coverage: renders title and children items.

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function DescriptionsRendersTitleAndChildrenDemo() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Renders items prop and extra content

test-backed

Descriptions scenario from the component test coverage: renders items prop and extra content.

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function DescriptionsRendersItemsPropAndDemo() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Applies bordered, size, layout, column, span, and custom class

test-backed

Descriptions scenario from the component test coverage: applies bordered, size, layout, column, span, and custom class.

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function DescriptionsAppliesBorderedSizeLayoutDemo() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Applies root and item label/content styles

test-backed

Descriptions scenario from the component test coverage: applies root and item label/content styles.

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function DescriptionsAppliesRootAndItemDemo() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Descriptions } from "@duskmoon-dev/components/descriptions";

export function DescriptionsForwardsRootRefDemo() {
  return (<Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>);
}

Preview

Sunshine Theme

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

Moonlight Theme

Release summary

Status

Ready

Owner

DuskMoon

Version

0.1.2

Channel

Stable

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">
  <Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Descriptions
  title="Release summary"
  bordered
  column={2}
  items={[
    { key: "status", label: "Status", children: "Ready" },
    { key: "owner", label: "Owner", children: "DuskMoon" },
    { key: "version", label: "Version", children: "0.1.2" },
    { key: "channel", label: "Channel", children: "Stable" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Descriptions. Start with `title`, `extra`, `items`, `bordered` for common usage.

Types: packages/components/src/components/descriptions/Descriptions.types.tsScenarios: packages/components/src/components/descriptions/Descriptions.test.tsx

DescriptionsPropsinterface extends Omit< ComponentProps<"div">, "children" | "title" >

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Descriptions.
`extra`	`ReactNode`	No	extra configures Descriptions.
`items`	`DescriptionsItemType[]`	No	items configures Descriptions.
`children`	`ReactNode`	No	children configures Descriptions.
`bordered`	`boolean`	No	bordered configures Descriptions.
`size`	`DescriptionsSize`	No	size configures Descriptions.
`column`	`DescriptionsColumn`	No	column configures Descriptions.
`layout`	`DescriptionsLayout`	No	layout configures Descriptions.
`labelStyle`	`CSSProperties`	No	labelStyle configures Descriptions.
`contentStyle`	`CSSProperties`	No	contentStyle configures Descriptions.

DescriptionsItemTypeinterface

Prop	Type	Required	Description
`key`	`string \| number`	No	key configures Descriptions.
`label`	`ReactNode`	No	label configures Descriptions.
`children`	`ReactNode`	No	children configures Descriptions.
`span`	`DescriptionsSpan`	No	span configures Descriptions.
`className`	`string`	No	className configures Descriptions.
`labelStyle`	`CSSProperties`	No	labelStyle configures Descriptions.
`contentStyle`	`CSSProperties`	No	contentStyle configures Descriptions.

DescriptionsItemPropsinterface extends Omit< ComponentProps<"div">, "children" >

Prop	Type	Required	Description
`label`	`ReactNode`	No	label configures Descriptions.
`children`	`ReactNode`	No	children configures Descriptions.
`span`	`DescriptionsSpan`	No	span configures Descriptions.
`labelStyle`	`CSSProperties`	No	labelStyle configures Descriptions.
`contentStyle`	`CSSProperties`	No	contentStyle configures Descriptions.

DescriptionsSizetype

"small" | "middle" | "default" | "sm" | "md" | "lg"

DescriptionsLayouttype

"horizontal" | "vertical"

DescriptionsBreakpointtype

"xs" | "sm" | "md" | "lg" | "xl" | "xxl"

DescriptionsResponsiveValuetype

Partial< Record<DescriptionsBreakpoint, number> >

DescriptionsColumntype

number | DescriptionsResponsiveValue

DescriptionsSpantype

number | DescriptionsResponsiveValue | "filled"

DescriptionsItemComponenttype

ForwardRefExoticComponent< DescriptionsItemProps & RefAttributes<HTMLDivElement> >

DescriptionsComponenttype

ForwardRefExoticComponent< DescriptionsProps & RefAttributes<HTMLDivElement> > & { Item: DescriptionsItemComponent