Layoutduskmoonimplemented7 demos

Layout

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

Import@duskmoon-dev/components/layout

6API sections

13documented props

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

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

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

Sider

Content

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

Sider

Content

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

Sider

Content

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

Sider

Content

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

Sider

Content

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

Sider

Content

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

Sider

Content

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

LayoutPropsinterface extends Omit<ComponentProps<"div">, "ref">

Prop	Type	Required	Description
`hasSider`	`boolean`	No	hasSider configures Layout.

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

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

LayoutBreakpointtype

"xs" | "sm" | "md" | "lg" | "xl" | "xxl"

LayoutSectionPropstype

Omit<ComponentProps<"div">, "ref">

CollapseTypetype

"clickTrigger" | "responsive"