Dm DuskMoon React
Standard duskmoon implemented 6 demos

Grid

Grid exposes responsive breakpoint information for adaptive layouts.

Import @duskmoon-dev/components/grid
4 API sections
0 documented props
4 behavior scenarios

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.

Covered behavior

Exports hook helpers on the Grid object

Feature Demos

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

Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

Basic usage

authored

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

Source
import "@duskmoon-dev/components/styles.css";
import { Grid } from "@duskmoon-dev/components/grid";

export function Example() {
  return (<Grid>DuskMoon Grid</Grid>);
}
Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

Exports hook helpers on the Grid object

test-backed

Grid scenario from the component test coverage: exports hook helpers on the grid object.

Source
import "@duskmoon-dev/components/styles.css";
import { Grid } from "@duskmoon-dev/components/grid";

export function GridExportsHookHelpersOnDemo() {
  return (<Grid>DuskMoon Grid</Grid>);
}
Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

Returns a complete fallback screen map without matchMedia

test-backed

Grid scenario from the component test coverage: returns a complete fallback screen map without matchmedia.

Source
import "@duskmoon-dev/components/styles.css";
import { Grid } from "@duskmoon-dev/components/grid";

export function GridReturnsACompleteFallbackDemo() {
  return (<Grid>DuskMoon Grid</Grid>);
}
Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

Reads breakpoint state from matchMedia

test-backed

Grid scenario from the component test coverage: reads breakpoint state from matchmedia.

Source
import "@duskmoon-dev/components/styles.css";
import { Grid } from "@duskmoon-dev/components/grid";

export function GridReadsBreakpointStateFromDemo() {
  return (<Grid>DuskMoon Grid</Grid>);
}
Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

Updates subscribers and supports useWatch selectors

test-backed

Grid scenario from the component test coverage: updates subscribers and supports usewatch selectors.

Source
import "@duskmoon-dev/components/styles.css";
import { Grid } from "@duskmoon-dev/components/grid";

export function GridUpdatesSubscribersAndSupportsDemo() {
  return (<Grid>DuskMoon Grid</Grid>);
}
Preview
Current breakpoints
xssmmdlgxlxxl
No active matches

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">
  <Grid>DuskMoon Grid</Grid>
</div>

<div data-theme="moonlight">
  <Grid>DuskMoon Grid</Grid>
</div>

API

The API reference below lists every parsed exported type or interface for Grid.

Types: packages/components/src/components/grid/Grid.types.ts Scenarios: packages/components/src/components/grid/Grid.test.tsx
Breakpoint type 
(typeof gridBreakpoints)[number]
BreakpointQueryMap type 
typeof gridBreakpointQueries
BreakpointScreenMap type 
Record<Breakpoint, boolean>
BreakpointScreenInput type 
Partial<BreakpointScreenMap>