Standard duskmoon implemented 3 demos

Row

Row creates guttered horizontal grid layouts.

Import @duskmoon-dev/components/row

4 API sections

5 documented props

1 behavior scenarios

Key API

alignjustifygutterwrap

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

Row is most often configured through `align`, `justify`, `gutter`, `wrap`.

Covered behavior

Renders flex row with gutter, align, justify, and wrap classes

Feature Demos

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

Preview

span 7

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Row } from "@duskmoon-dev/components/row";

export function Example() {
  return (<Row gutter={[12, 12]} align="middle" justify="space-between">
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
</Row>);
}

Preview

span 7

Renders flex row with gutter, align, justify, and wrap classes

test-backed

Row scenario from the component test coverage: renders flex row with gutter, align, justify, and wrap classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Row } from "@duskmoon-dev/components/row";

export function RowRendersFlexRowWithDemo() {
  return (<Row gutter={[12, 12]} align="middle" justify="space-between">
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
</Row>);
}

Preview

span 7

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">
  <Row gutter={[12, 12]} align="middle" justify="space-between">
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
</Row>
</div>

<div data-theme="moonlight">
  <Row gutter={[12, 12]} align="middle" justify="space-between">
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
  <div style={{ flex: "0 0 29.167%" }}>span 7</div>
</Row>
</div>

API

The API reference below lists every parsed exported type or interface for Row. Start with `align`, `justify`, `gutter`, `wrap` for common usage.

Types: packages/components/src/components/row/Row.types.ts Scenarios: packages/components/src/components/row/Row.test.tsx

RowProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`align`	`RowAlign`	No	align configures Row.
`justify`	`RowJustify`	No	justify configures Row.
`gutter`	`RowGutter`	No	gutter configures Row.
`wrap`	`boolean`	No	wrap configures Row.
`children`	`ReactNode`	No	children configures Row.

RowAlign type

"top" | "middle" | "bottom" | "stretch"

RowJustify type

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

RowGutter type

number | [number, number]