Layoutduskmoonimplemented7 demos

Space

Space applies consistent spacing between neighboring elements.

Import@duskmoon-dev/components/space

6API sections

9documented props

5behavior 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

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

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.tsScenarios: packages/components/src/components/space/Space.test.tsx

SpacePropsinterface 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.

SpaceCompactPropsinterface 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.

SpaceComponentinterface extends React.ForwardRefExoticComponent< SpaceProps & React.RefAttributes<HTMLDivElement> >

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

SpaceSizetype

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

SpaceDirectiontype

"horizontal" | "vertical"

SpaceAligntype

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