Standard duskmoon implemented 10 demos

Drawer

Drawer opens side-panel workflows without replacing the underlying screen.

Import @duskmoon-dev/components/drawer

4 API sections

12 documented props

8 behavior scenarios

Key API

opentitleplacementonClosecloseIconfooter

Usage

When to use

Use it when supporting content should stay attached to a trigger or task context.
Prefer controlled open state when the surrounding workflow needs to react to dismissal.

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

Contextual surface

Documents trigger, placement, and open-state patterns for content rendered above the page.

Dismissal behavior

Highlights controlled state and close callbacks where overlays expose them.

Primary API surface

Drawer is most often configured through `open`, `title`, `placement`, `onClose`.

Covered behavior

Renders title and children when open

Feature Demos

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

Preview

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function Example() {
  return (<Drawer
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Renders title and children when open

test-backed

Drawer scenario from the component test coverage: renders title and children when open.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerRendersTitleAndChildrenDemo() {
  return (<Drawer
  // Renders title and children when open
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Keeps closed drawer without open class

test-backed

Drawer scenario from the component test coverage: keeps closed drawer without open class.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerKeepsClosedDrawerWithoutDemo() {
  return (<Drawer
  // Keeps closed drawer without open class
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Supports title prop

test-backed

Drawer scenario from the component test coverage: supports title prop.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerSupportsTitlePropDemo() {
  return (<Drawer
  // Supports title prop
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Supports placement classes

test-backed

Drawer scenario from the component test coverage: supports placement classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerSupportsPlacementClassesDemo() {
  return (<Drawer
  // Supports placement classes
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Calls onClose from the close button

test-backed

Drawer scenario from the component test coverage: calls onclose from the close button.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerCallsOnCloseFromTheDemo() {
  return (<Drawer
  // Calls onClose from the close button
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Renders footer and extra content

test-backed

Drawer scenario from the component test coverage: renders footer and extra content.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerRendersFooterAndExtraDemo() {
  return (<Drawer
  // Renders footer and extra content
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Applies size, placement, width, and height

test-backed

Drawer scenario from the component test coverage: applies size, placement, width, and height.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerAppliesSizePlacementWidthDemo() {
  return (<Drawer
  // Applies size, placement, width, and height
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Forwards aside ref and native props

test-backed

Drawer scenario from the component test coverage: forwards aside ref and native props.

Source

import "@duskmoon-dev/components/styles.css";
import { Drawer } from "@duskmoon-dev/components/drawer";

export function DrawerForwardsAsideRefAndDemo() {
  return (<Drawer
  // Forwards aside ref and native props
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>);
}

Preview

Sunshine Theme

Moonlight Theme

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">
  <Drawer
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>
</div>

<div data-theme="moonlight">
  <Drawer
  title="DuskMoon"
  open
>
  DuskMoon Drawer
</Drawer>
</div>

API

The API reference below lists every parsed exported type or interface for Drawer. Start with `open`, `title`, `placement`, `onClose` for common usage.

Types: packages/components/src/components/drawer/Drawer.types.ts Scenarios: packages/components/src/components/drawer/Drawer.test.tsx

DrawerProps interface extends Omit< ComponentProps<"aside">, "children" | "className" | "title" >

Prop	Type	Required	Description
`open`	`boolean`	No	open configures Drawer.
`title`	`ReactNode`	No	title configures Drawer.
`children`	`ReactNode`	No	children configures Drawer.
`placement`	`DrawerPlacement`	No	placement configures Drawer.
`onClose`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	onClose configures Drawer.
`closeIcon`	`ReactNode`	No	closeIcon configures Drawer.
`footer`	`ReactNode`	No	footer configures Drawer.
`extra`	`ReactNode`	No	extra configures Drawer.
`width`	`CSSProperties["width"]`	No	width configures Drawer.
`height`	`CSSProperties["height"]`	No	height configures Drawer.
`size`	`DrawerSize`	No	size configures Drawer.
`className`	`string`	No	className configures Drawer.

DrawerPlacement type

"left" | "right" | "top" | "bottom"

DrawerSize type

"sm" | "md" | "lg" | "xl"

DrawerComponent type

ForwardRefExoticComponent< DrawerProps & RefAttributes<HTMLElement> >