Standard duskmoon implemented 6 demos

Flex

Flex arranges inline or wrapping content with a small layout API.

Import @duskmoon-dev/components/flex

4 API sections

7 documented props

4 behavior scenarios

Key API

componentverticalwrapjustifyaligngap

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

Flex is most often configured through `component`, `vertical`, `wrap`, `justify`.

Covered behavior

Renders children with default class

Feature Demos

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

Preview

AlphaBetaGamma

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function Example() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Renders children with default class

test-backed

Flex scenario from the component test coverage: renders children with default class.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexRendersChildrenWithDefaultDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Supports gap, justify, and align

test-backed

Flex scenario from the component test coverage: supports gap, justify, and align.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexSupportsGapJustifyAndDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Supports vertical and wrap

test-backed

Flex scenario from the component test coverage: supports vertical and wrap.

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexSupportsVerticalAndWrapDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

Forwards root ref

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Flex } from "@duskmoon-dev/components/flex";

export function FlexForwardsRootRefDemo() {
  return (<Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>);
}

Preview

AlphaBetaGamma

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">
  <Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>
</div>

<div data-theme="moonlight">
  <Flex gap="middle" wrap align="center">
  <span>Alpha</span>
  <span>Beta</span>
  <span>Gamma</span>
</Flex>
</div>

API

The API reference below lists every parsed exported type or interface for Flex. Start with `component`, `vertical`, `wrap`, `justify` for common usage.

Types: packages/components/src/components/flex/Flex.types.ts Scenarios: packages/components/src/components/flex/Flex.test.tsx

FlexProps interface extends Omit<ComponentProps<"div">, "ref">

Prop	Type	Required	Description
`component`	`ElementType`	No	component configures Flex.
`vertical`	`boolean`	No	vertical configures Flex.
`wrap`	`boolean \| React.CSSProperties["flexWrap"]`	No	wrap configures Flex.
`justify`	`FlexJustify`	No	justify configures Flex.
`align`	`FlexAlign`	No	align configures Flex.
`gap`	`FlexGap \| [FlexGap, FlexGap]`	No	gap configures Flex.
`flex`	`React.CSSProperties["flex"]`	No	flex configures Flex.

FlexJustify type

| "normal" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly"

FlexAlign type

| "normal" | "start" | "end" | "center" | "baseline" | "stretch"

FlexGap type

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