Actions & Overlays

Drawer

An off-canvas panel built on the native <dialog>.

stableEnhancer: enhanceDrawerBuilt on <dialog>hydrateless/drawer.css

An off-canvas panel built on the native <dialog> element, sliding in from the left or right. It mirrors the modal but with a side-anchored layout and a slide animation that respects prefers-reduced-motion.

Playground

Live

Settings

A drawer slides in from the chosen side. Click the backdrop or press Escape to close.

Siderightleft

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceDrawer } from '@hydrateless/enhancers/drawer';

const handle = enhanceDrawer(container, { closeOnBackdrop, defaultOpen, onOpenChange });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
open	boolean	—	Controlled visibility; pair with `onOpenChange`.
side	'left' | 'right'	'right'	Edge the panel anchors to.

Events and callbacks

Event / Callback	Payload	Description
hl:open-change	{ open: boolean }	Fires whenever the drawer opens or closes.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-surface	Panel background.
--hl-overlay	Backdrop color.
--hl-shadow-lg	Panel elevation.

Accessibility

• Built on <dialog>, so focus trapping, inert background, and Esc to close are native.
• The slide animation collapses to a fade under prefers-reduced-motion.

Related

ModalA dialog overlay built on the native <dialog> element.PopoverFloating content anchored to a trigger.