Standard duskmoon implemented 7 demos

Timeline

Timeline shows ordered events, milestones, or audit history.

Import @duskmoon-dev/components/timeline

5 API sections

12 documented props

4 behavior scenarios

Key API

itemsmodependingreversesizelabel

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

Timeline is most often configured through `items`, `mode`, `pending`, `reverse`.

Covered behavior

Renders item children with default timeline classes

Feature Demos

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

Preview

1primary milestone

2secondary milestone

3tertiary milestone

4accent milestone

5neutral milestone

6base milestone

7info milestone

8success milestone

9warning milestone

10error milestone

Colors

authored

Timeline supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function TimelineColorsDemo() {
  return (<Timeline
  items={colors.map((color, index) => ({
    label: `${index + 1}`,
    children: `${color} milestone`,
    color
  }))}
/>);
}

Preview

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

export function Example() {
  return (<Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>);
}

Preview

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

Renders item children with default timeline classes

test-backed

Timeline scenario from the component test coverage: renders item children with default timeline classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

export function TimelineRendersItemChildrenWithDemo() {
  return (<Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>);
}

Preview

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

Supports className and alternate mode

test-backed

Timeline scenario from the component test coverage: supports classname and alternate mode.

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

export function TimelineSupportsClassNameAndAlternateDemo() {
  return (<Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>);
}

Preview

1primary milestone

2secondary milestone

3tertiary milestone

4accent milestone

5neutral milestone

6base milestone

7info milestone

8success milestone

9warning milestone

10error milestone

Supports label, color, dot, pending, and reverse

test-backed

Timeline scenario from the component test coverage: supports label, color, dot, pending, and reverse.

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

export function TimelineSupportsLabelColorDotDemo() {
  return (<Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>);
}

Preview

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Timeline } from "@duskmoon-dev/components/timeline";

export function TimelineForwardsRootRefDemo() {
  return (<Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>);
}

Preview

Sunshine Theme

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

Moonlight Theme

09:00Kickoff and scope review

11:30Design QA completed

14:00Release notes prepared

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">
  <Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Timeline
  items={[
    { label: "09:00", children: "Kickoff and scope review", color: "primary" },
    { label: "11:30", children: "Design QA completed", color: "success" },
    { label: "14:00", children: "Release notes prepared", color: "secondary" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Timeline. Start with `items`, `mode`, `pending`, `reverse` for common usage.

Types: packages/components/src/components/timeline/Timeline.types.ts Scenarios: packages/components/src/components/timeline/Timeline.test.tsx

TimelineProps interface extends Omit<ComponentProps<"div">, "children">

Prop	Type	Required	Description
`items`	`TimelineItem[]`	No	items configures Timeline.
`children`	`ReactNode`	No	children configures Timeline.
`mode`	`TimelineMode`	No	mode configures Timeline.
`pending`	`ReactNode \| boolean`	No	pending configures Timeline.
`reverse`	`boolean`	No	reverse configures Timeline.
`size`	`TimelineSize`	No	size configures Timeline.

TimelineItem interface

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Timeline.
`label`	`ReactNode`	No	label configures Timeline.
`color`	`TimelineColor`	No	color configures Timeline.
`dot`	`ReactNode`	No	dot configures Timeline.
`pending`	`boolean`	No	pending configures Timeline.
`className`	`string`	No	className configures Timeline.

TimelineMode type

"left" | "right" | "alternate"

TimelineColor type

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

TimelineSize type

"sm" | "md" | "lg"