Prepared Docs

Drawer from @prepared911/ui-drawer renders a sliding panel anchored to the left or right of the viewport, with global open state via useDrawerStore, optional portal rendering, and composition helpers (DrawerHeader, DrawerContent, DrawerFooter). Use this page for API reference and a single interactive preview; Storybook holds the full set of examples.

Example

A portaled drawer with header, scrollable list body, one expandable section, and a footer—similar to detail panels when reviewing historical (archived) incidents in dispatch.

Props

Name	Type	Default	Description
`id`	`string`	—	—
`anchor`	`AnchorPosition.Left \| AnchorPosition.Right`	`AnchorPosition.Right`	—
`clickOutsideToClose`	`boolean`	`false`	—
`closeOnEscape`	`boolean`	`true`	When `false`, Escape does not close the drawer. Defaults to `true`. Pair with `onEscapeKeyDown` when a parent owns layered Escape dismissal.
`closeTitle`	`string`	—	Accessible label for the default header close button when `title` is set.
`defaultOpen`	`boolean`	`false`	—
`excludeFromLayout`	`boolean`	`false`	When `true`, the drawer still tracks open state but is excluded from shared layout math (`anyDrawerOpen`, `getOpenDrawerWidth`, `getAnchoredOpenDrawerWidth`) and does not sync width into the store. Use for overlay panels (e.g. staff panel) that must not reflow app chrome.
`maxWidth`	`string`	`60rem`	Maximum width while resizing.
`minWidth`	`string`	`40rem`	Minimum width while resizing.
`onClose`	`(() => void)`	—	—
`onEscapeKeyDown`	`((event: KeyboardEvent) => void)`	—	Called when Escape is pressed while the drawer is open. Call `event.preventDefault()` to keep the drawer open even when `closeOnEscape` is `true`.
`onExitComplete`	`(() => void)`	—	Called after the exit animation finishes (e.g. clear parent state that would unmount this drawer).
`onOpen`	`(() => void)`	—	—
`portalSelector`	`string`	—	—
`position`	`Position`	`Position.Absolute`	—
`resizable`	`boolean`	`false`	Shows a drag handle on the inner edge so users can resize between `minWidth` and `maxWidth`.
`title`	`string`	—	When set, renders a default `DrawerHeader` with this title before `children`. Prefer explicit `DrawerHeader` for custom header chrome.
`width`	`string`	`45rem`	Initial / non-resized width.
`zIndex`	`DrawerZIndex`	`ZIndex.Overlay`	Z-index level for the drawer container. If not set, defaults to Overlay. Use `ZIndex` from `@prepared911/ui-core`.

Resize

Set resizable to show a drag handle on the inner edge. Out of the box the width clamps between 40rem (DRAWER_DEFAULT_MIN_WIDTH) and 60rem (DRAWER_DEFAULT_MAX_WIDTH); override with minWidth / maxWidth / width as needed. Values may be rem, px, or vw/dvw.

Layout exclusion

Pass excludeFromLayout when a drawer should keep its own open state but must not participate in shared layout math (anyDrawerOpen, getOpenDrawerWidth, getAnchoredOpenDrawerWidth) or width sync. Use this for overlays such as the staff panel that sit above the app without padding main content.

DrawerNav renders fixed segmented navigation between DrawerHeader and DrawerContent. Set collapseUnselectedLabels to keep the active item label open while collapsing inactive items to their icons. Collapsible DrawerNavItem entries must provide both icon and aria-label.

Name	Type	Default	Description
`value`	`string`	—	Controlled selected segment value.
`defaultValue`	`string`	—	Initial uncontrolled segment value.
`onValueChange`	`(value: string) => void`	—	Runs when selection changes.
`fullSpan`	`boolean`	`false`	Expands segments evenly across the nav width.
`collapseUnselectedLabels`	`boolean`	`false`	Collapses inactive labels to their icons.
`actions`	`ReactNode`	—	Controls pinned to the right of the nav.
`border`	`boolean`	`true`	Renders the nav bottom border.
`mergeWithHeader`	`boolean`	`true`	Merges compact nav chrome with the preceding header.
`dragToScroll`	`boolean`	`true`	Enables horizontal drag-to-scroll for overflowing items.

Storybook

Drawer / Usage

Drawer / Accessibility

Example

A portaled drawer with header, scrollable list body, one expandable section, and a footer—similar to detail panels when reviewing historical (archived) incidents in dispatch.

Props

Name	Type	Default	Description
`id`	`string`	—	—
`anchor`	`AnchorPosition.Left \| AnchorPosition.Right`	`AnchorPosition.Right`	—
`clickOutsideToClose`	`boolean`	`false`	—
`closeOnEscape`	`boolean`	`true`	When `false`, Escape does not close the drawer. Defaults to `true`. Pair with `onEscapeKeyDown` when a parent owns layered Escape dismissal.
`closeTitle`	`string`	—	Accessible label for the default header close button when `title` is set.
`defaultOpen`	`boolean`	`false`	—
`excludeFromLayout`	`boolean`	`false`	When `true`, the drawer still tracks open state but is excluded from shared layout math (`anyDrawerOpen`, `getOpenDrawerWidth`, `getAnchoredOpenDrawerWidth`) and does not sync width into the store. Use for overlay panels (e.g. staff panel) that must not reflow app chrome.
`maxWidth`	`string`	`60rem`	Maximum width while resizing.
`minWidth`	`string`	`40rem`	Minimum width while resizing.
`onClose`	`(() => void)`	—	—
`onEscapeKeyDown`	`((event: KeyboardEvent) => void)`	—	Called when Escape is pressed while the drawer is open. Call `event.preventDefault()` to keep the drawer open even when `closeOnEscape` is `true`.
`onExitComplete`	`(() => void)`	—	Called after the exit animation finishes (e.g. clear parent state that would unmount this drawer).
`onOpen`	`(() => void)`	—	—
`portalSelector`	`string`	—	—
`position`	`Position`	`Position.Absolute`	—
`resizable`	`boolean`	`false`	Shows a drag handle on the inner edge so users can resize between `minWidth` and `maxWidth`.
`title`	`string`	—	When set, renders a default `DrawerHeader` with this title before `children`. Prefer explicit `DrawerHeader` for custom header chrome.
`width`	`string`	`45rem`	Initial / non-resized width.
`zIndex`	`DrawerZIndex`	`ZIndex.Overlay`	Z-index level for the drawer container. If not set, defaults to Overlay. Use `ZIndex` from `@prepared911/ui-core`.

Resize

Layout exclusion

Name	Type	Default	Description
`value`	`string`	—	Controlled selected segment value.
`defaultValue`	`string`	—	Initial uncontrolled segment value.
`onValueChange`	`(value: string) => void`	—	Runs when selection changes.
`fullSpan`	`boolean`	`false`	Expands segments evenly across the nav width.
`collapseUnselectedLabels`	`boolean`	`false`	Collapses inactive labels to their icons.
`actions`	`ReactNode`	—	Controls pinned to the right of the nav.
`border`	`boolean`	`true`	Renders the nav bottom border.
`mergeWithHeader`	`boolean`	`true`	Merges compact nav chrome with the preceding header.
`dragToScroll`	`boolean`	`true`	Enables horizontal drag-to-scroll for overflowing items.

Storybook

Drawer / Usage

Drawer / Accessibility