Layoutduskmoonimplemented3 demos

Row

Row creates guttered horizontal grid layouts.

Import@duskmoon-dev/components/row

4API sections

5documented props

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

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

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

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

RowAligntype

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

RowJustifytype

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

RowGuttertype

number | [number, number]