Standard duskmoon implemented 9 demos

List

List renders repeated records with item metadata and secondary actions.

Import @duskmoon-dev/components/list

7 API sections

11 documented props

7 behavior scenarios

Key API

dataSourcerenderItemborderedsizeactionsextra

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

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

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

Theme The 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

List is most often configured through `dataSource`, `renderItem`, `bordered`, `size`.

Covered behavior

Renders dataSource with renderItem

Feature Demos

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

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function Example() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Renders dataSource with renderItem

test-backed

List scenario from the component test coverage: renders datasource with renderitem.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListRendersDataSourceWithRenderItemDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Supports className and children

test-backed

List scenario from the component test coverage: supports classname and children.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListSupportsClassNameAndChildrenDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Renders List.Item

test-backed

List scenario from the component test coverage: renders list.item.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListRendersListItemDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Renders List.Item.Meta title and description

test-backed

List scenario from the component test coverage: renders list.item.meta title and description.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListRendersListItemMetaDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Renders actions, extra, and meta avatar

test-backed

List scenario from the component test coverage: renders actions, extra, and meta avatar.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListRendersActionsExtraAndDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Applies bordered and size classes

test-backed

List scenario from the component test coverage: applies bordered and size classes.

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListAppliesBorderedAndSizeDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { List } from "@duskmoon-dev/components/list";

export function ListForwardsRootRefDemo() {
  return (<List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>);
}

Preview

Design tokens

Updated color and spacing scale

Open

Components

Reviewed visual states

Open

Release

Ready for package validation

Open

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">
  <List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>
</div>

<div data-theme="moonlight">
  <List bordered>
  {[
    { title: "Design tokens", description: "Updated color and spacing scale" },
    { title: "Components", description: "Reviewed visual states" },
    { title: "Release", description: "Ready for package validation" }
  ].map((item) => (
    <List.Item key={item.title} extra="Open">
      <List.Item.Meta
        title={item.title}
        description={item.description}
      />
    </List.Item>
  ))}
</List>
</div>

API

The API reference below lists every parsed exported type or interface for List. Start with `dataSource`, `renderItem`, `bordered`, `size` for common usage.

Types: packages/components/src/components/list/List.types.ts Scenarios: packages/components/src/components/list/List.test.tsx

ListProps interface extends <T = unknown> extends Omit< ComponentProps<"div">, "children" >

Prop	Type	Required	Description
`dataSource`	`T[]`	No	dataSource configures List.
`renderItem`	`(item: T, index: number) => ReactNode`	No	renderItem configures List.
`children`	`ReactNode`	No	children configures List.
`bordered`	`boolean`	No	bordered configures List.
`size`	`ListSize`	No	size configures List.

ListItemProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`actions`	`ReactNode[] \| ReactNode`	No	actions configures List.
`extra`	`ReactNode`	No	extra configures List.
`disabled`	`boolean`	No	disabled configures List.

ListItemMetaProps interface extends Omit< ComponentProps<"div">, "title" >

Prop	Type	Required	Description
`avatar`	`ReactNode`	No	avatar configures List.
`title`	`ReactNode`	No	title configures List.
`description`	`ReactNode`	No	description configures List.

ListSize type

"sm" | "md" | "lg"

ListItemMetaComponent type

ForwardRefExoticComponent< ListItemMetaProps & RefAttributes<HTMLDivElement> >

ListItemComponent type

ForwardRefExoticComponent< ListItemProps & RefAttributes<HTMLDivElement> > & { Meta: ListItemMetaComponent

ListComponent type

(<T = unknown>( props: ListProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null) & { Item: ListItemComponent