Dm DuskMoon React
Standard duskmoon implemented 7 demos

Layout

Layout composes application shells with header, sider, content, and footer regions.

Import @duskmoon-dev/components/layout
6 API sections
13 documented props
5 behavior scenarios
Key API
hasSidercollapsiblecollapseddefaultCollapsedonCollapsewidth

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

Layout is most often configured through `hasSider`, `collapsible`, `collapsed`, `defaultCollapsed`.

Covered behavior

Renders root and static sections with quiet classes

Feature Demos

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

Preview
Header
Sider
Content
Footer

Basic usage

authored

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

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

export function Example() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

Renders root and static sections with quiet classes

test-backed

Layout scenario from the component test coverage: renders root and static sections with quiet classes.

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

export function LayoutRendersRootAndStaticDemo() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

Passes native div props and style through root

test-backed

Layout scenario from the component test coverage: passes native div props and style through root.

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

export function LayoutPassesNativeDivPropsDemo() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

Supports uncontrolled sider collapse from defaultCollapsed

test-backed

Layout scenario from the component test coverage: supports uncontrolled sider collapse from defaultcollapsed.

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

export function LayoutSupportsUncontrolledSiderCollapseDemo() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

Supports controlled sider collapse and reports trigger changes

test-backed

Layout scenario from the component test coverage: supports controlled sider collapse and reports trigger changes.

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

export function LayoutSupportsControlledSiderCollapseDemo() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

Omits trigger when trigger is null

test-backed

Layout scenario from the component test coverage: omits trigger when trigger is null.

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

export function LayoutOmitsTriggerWhenTriggerDemo() {
  return (<Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>);
}
Preview
Header
Sider
Content
Footer

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">
  <Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>
</div>

<div data-theme="moonlight">
  <Layout style={{ width: "100%", maxWidth: 640 }}>
  <Layout.Header>Header</Layout.Header>
  <Layout hasSider>
    <Layout.Sider width={160}>Sider</Layout.Sider>
    <Layout.Content>Content</Layout.Content>
  </Layout>
  <Layout.Footer>Footer</Layout.Footer>
</Layout>
</div>

API

The API reference below lists every parsed exported type or interface for Layout. Start with `hasSider`, `collapsible`, `collapsed`, `defaultCollapsed` for common usage.

Types: packages/components/src/components/layout/Layout.types.ts Scenarios: packages/components/src/components/layout/Layout.test.tsx
LayoutProps interface extends Omit<ComponentProps<"div">, "ref">
Prop Type Required Description
hasSider boolean No hasSider configures Layout.
LayoutSiderProps interface extends LayoutSectionProps
Prop Type Required Description
collapsible boolean No collapsible configures Layout.
collapsed boolean No collapsed configures Layout.
defaultCollapsed boolean No defaultCollapsed configures Layout.
onCollapse (collapsed: boolean, type: CollapseType) => void No onCollapse configures Layout.
width CSSProperties["width"] No width configures Layout.
collapsedWidth CSSProperties["width"] No collapsedWidth configures Layout.
trigger ReactNode No trigger configures Layout.
breakpoint LayoutBreakpoint No breakpoint configures Layout.
LayoutComponent interface extends ForwardRefExoticComponent< LayoutProps & RefAttributes<HTMLDivElement> >
Prop Type Required Description
Header ForwardRefExoticComponent< Yes Header configures Layout.
Sider ForwardRefExoticComponent< Yes Sider configures Layout.
Content ForwardRefExoticComponent< Yes Content configures Layout.
Footer ForwardRefExoticComponent< Yes Footer configures Layout.
LayoutBreakpoint type 
"xs" | "sm" | "md" | "lg" | "xl" | "xxl"
LayoutSectionProps type 
Omit<ComponentProps<"div">, "ref">
CollapseType type 
"clickTrigger" | "responsive"