Standard duskmoon implemented 7 demos

Tour

Tour walks users through key areas of an interface.

Import @duskmoon-dev/components/tour

7 API sections

37 documented props

5 behavior scenarios

Key API

stepsopendefaultOpencurrentdefaultCurrentplacement

Usage

When to use

Use it immediately after user actions or system checks that need visible confirmation.
Choose the least interruptive feedback surface that still makes the state clear.

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

User feedback

Covers transient, inline, or blocking feedback patterns for user actions and system status.

Action recovery

Shows how the component keeps next actions visible after success, warning, or failure states.

Primary API surface

Tour is most often configured through `steps`, `open`, `defaultOpen`, `current`.

Covered behavior

Renders the current step when open

Feature Demos

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

Preview

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function Example() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Renders the current step when open

test-backed

Tour scenario from the component test coverage: renders the current step when open.

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function TourRendersTheCurrentStepDemo() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Supports uncontrolled step changes and finish close

test-backed

Tour scenario from the component test coverage: supports uncontrolled step changes and finish close.

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function TourSupportsUncontrolledStepChangesDemo() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Honors controlled current and custom indicators

test-backed

Tour scenario from the component test coverage: honors controlled current and custom indicators.

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function TourHonorsControlledCurrentAndDemo() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Applies placement, target highlight, and mask config

test-backed

Tour scenario from the component test coverage: applies placement, target highlight, and mask config.

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function TourAppliesPlacementTargetHighlightDemo() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Supports close callbacks and hidden mask or indicators

test-backed

Tour scenario from the component test coverage: supports close callbacks and hidden mask or indicators.

Source

import "@duskmoon-dev/components/styles.css";
import { Tour } from "@duskmoon-dev/components/tour";

export function TourSupportsCloseCallbacksAndDemo() {
  return (<Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

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">
  <Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Tour
  open
  mask={false}
  steps={[
    {
      title: "Welcome",
      description: "Review the highlighted workflow.",
      style: {
        position: "static",
        left: "auto",
        top: "auto",
        transform: "none"
      }
    }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Tour. Start with `steps`, `open`, `defaultOpen`, `current` for common usage.

Types: packages/components/src/components/tour/Tour.types.ts Scenarios: packages/components/src/components/tour/Tour.test.tsx

TourProps interface extends Omit< ComponentProps<"div">, "children" | "title" | "onChange" >

Prop	Type	Required	Description
`steps`	`TourStep[]`	No	steps configures Tour.
`open`	`boolean`	No	open configures Tour.
`defaultOpen`	`boolean`	No	defaultOpen configures Tour.
`current`	`number`	No	current configures Tour.
`defaultCurrent`	`number`	No	defaultCurrent configures Tour.
`placement`	`TourPlacement`	No	placement configures Tour.
`mask`	`boolean \| TourMaskConfig`	No	mask configures Tour.
`indicators`	`boolean \| ((current: number, total: number) => ReactNode)`	No	indicators configures Tour.
`indicatorsRender`	`(current: number, total: number) => ReactNode`	No	indicatorsRender configures Tour.
`closeIcon`	`ReactNode`	No	closeIcon configures Tour.
`disabledInteraction`	`boolean`	No	disabledInteraction configures Tour.
`zIndex`	`number`	No	zIndex configures Tour.
`gap`	`number`	No	gap configures Tour.
`nextButtonProps`	`ButtonProps`	No	nextButtonProps configures Tour.
`prevButtonProps`	`ButtonProps`	No	prevButtonProps configures Tour.
`onClose`	`(current: number) => void`	No	onClose configures Tour.
`onChange`	`(current: number) => void`	No	onChange configures Tour.
`onFinish`	`() => void`	No	onFinish configures Tour.

TourMaskConfig interface

Prop	Type	Required	Description
`className`	`string`	No	className configures Tour.
`style`	`CSSProperties`	No	style configures Tour.
`color`	`string`	No	color configures Tour.

TourStep interface

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Tour.
`description`	`ReactNode`	No	description configures Tour.
`target`	`TourTarget`	No	target configures Tour.
`placement`	`TourPlacement`	No	placement configures Tour.
`cover`	`ReactNode`	No	cover configures Tour.
`mask`	`boolean \| TourMaskConfig`	No	mask configures Tour.
`nextButtonProps`	`ButtonProps`	No	nextButtonProps configures Tour.
`prevButtonProps`	`ButtonProps`	No	prevButtonProps configures Tour.
`closeIcon`	`ReactNode`	No	closeIcon configures Tour.
`className`	`string`	No	className configures Tour.
`style`	`CSSProperties`	No	style configures Tour.
`onClose`	`(current: number) => void`	No	onClose configures Tour.

TourTargetRect interface

Prop	Type	Required	Description
`top`	`number`	Yes	top configures Tour.
`left`	`number`	Yes	left configures Tour.
`width`	`number`	Yes	width configures Tour.
`height`	`number`	Yes	height configures Tour.

TourPlacement type

| "top" | "bottom" | "left" | "right" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom"

TourTarget type

| HTMLElement | null | string | (() => HTMLElement | null)

TourActionEvent type

MouseEvent<HTMLButtonElement>