Standard duskmoon implemented 7 demos

Space

Space applies consistent spacing between neighboring elements.

Import @duskmoon-dev/components/space

6 API sections

9 documented props

5 behavior scenarios

Key API

sizedirectionalignsplitwrapblock

Usage

When to use

Use it to build predictable page, toolbar, panel, or grid structure.
Keep layout primitives responsible for geometry and let child components own behavior.

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

Composition primitive

Documents spacing, responsive behavior, and nested regions used to build larger screens.

Stable geometry

Examples keep predictable dimensions so the surrounding UI does not jump while content changes.

Primary API surface

Space is most often configured through `size`, `direction`, `align`, `split`.

Covered behavior

Renders children with spacing wrappers

Feature Demos

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

Preview

Design

Build

Ship

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function Example() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

Renders children with spacing wrappers

test-backed

Space scenario from the component test coverage: renders children with spacing wrappers.

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function SpaceRendersChildrenWithSpacingDemo() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

Supports size and vertical direction

test-backed

Space scenario from the component test coverage: supports size and vertical direction.

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function SpaceSupportsSizeAndVerticalDemo() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

Supports split and wrap

test-backed

Space scenario from the component test coverage: supports split and wrap.

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function SpaceSupportsSplitAndWrapDemo() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

Exposes Compact component

test-backed

Space scenario from the component test coverage: exposes compact component.

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function SpaceExposesCompactComponentDemo() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Space } from "@duskmoon-dev/components/space";

export function SpaceForwardsRootRefDemo() {
  return (<Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>);
}

Preview

Design

Build

Ship

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">
  <Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>
</div>

<div data-theme="moonlight">
  <Space size="middle" wrap split="|">
  <span>Design</span>
  <span>Build</span>
  <span>Ship</span>
</Space>
</div>

API

The API reference below lists every parsed exported type or interface for Space. Start with `size`, `direction`, `align`, `split` for common usage.

Types: packages/components/src/components/space/Space.types.ts Scenarios: packages/components/src/components/space/Space.test.tsx

SpaceProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`size`	`SpaceSize \| [SpaceSize, SpaceSize]`	No	size configures Space.
`direction`	`SpaceDirection`	No	direction configures Space.
`align`	`SpaceAlign`	No	align configures Space.
`split`	`ReactNode`	No	split configures Space.
`wrap`	`boolean`	No	wrap configures Space.

SpaceCompactProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`block`	`boolean`	No	block configures Space.
`direction`	`SpaceDirection`	No	direction configures Space.
`size`	`SpaceSize`	No	size configures Space.

SpaceComponent interface extends React.ForwardRefExoticComponent< SpaceProps & React.RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`Compact`	`React.ForwardRefExoticComponent<`	Yes	Compact configures Space.

SpaceSize type

"small" | "middle" | "large" | number

SpaceDirection type

"horizontal" | "vertical"

SpaceAlign type

"start" | "end" | "center" | "baseline"