Drawer

A slide-out panel that appears from the edge of the screen for presenting content without navigating away from the current page.

Import

tsx

import { Drawer } from "asheeui";

Usage

tsx

"use client";

import { Button, Drawer } from "asheeui";
import { useState } from "react";

export default function Basic() {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<div className="flex flex-col items-center gap-4">
			<Button onClick={() => setIsOpen(true)}>Open Drawer</Button>

			<Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
				<p>Contents goes here</p>
			</Drawer>
		</div>
	);
}

Examples

Size

Placement

Animation

Overlay behavior

With ESC key disabled

Custom styling

With header and footer

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	None	Controls drawer visibility
`onClose`	`() => void`	None	Callback when drawer closes
`placement`	`"right" \| "left" \| "top" \| "bottom"`	`"right"`*	Edge from which drawer slides in
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`*	Size of the drawer
`animated`	`boolean`	`true`*	Enables slide animation
`closeOnOverlayClick`	`boolean`	`true`*	Close when clicking overlay
`closeOnEsc`	`boolean`	`true`*	Close when pressing ESC key
`overlayClassName`	`string`	None	Extra classes for overlay
`contentClassName`	`string`	None	Extra classes for content panel
`className`	`string`	None	Extra classes for root element

* Falls back through Global Configuration if not set. See below.

Global Configuration

Drawer reads defaults from four places, in this order of precedence:

Instance prop: set directly on <Drawer />
Component config: components.drawer in your ashee.config
Theme default: defaultRadius in your ashee.config
Built-in fallback: component's internal default values

Component config

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    drawer: {
      size: "md",
      placement: "right",
      animated: true,
      closeOnOverlayClick: true,
      closeOnEsc: true,
    },
  },
};

Built-in fallbacks

{
  size: "md",
  placement: "right",
  animated: true,
  closeOnOverlayClick: true,
  closeOnEsc: true,
}

Accessibility

Renders a native dialog role with aria-modal="true"
Focus management with automatic focus trapping
ESC key support for closing (configurable)
Backdrop click support for closing (configurable)
Implements focus-visible outlines for keyboard navigation
Focus returns to trigger element when drawer closes

Notes

Size Variants: The full size makes the drawer take the full viewport dimension in its placement direction (e.g., full width for left/right, full height for top/bottom).
Animation: The drawer uses CSS keyframe animations with a 250ms duration for smooth slide transitions.
Overlay: The default overlay has a backdrop blur effect (backdrop-blur-md) for improved visual hierarchy.
Content Sizing: The drawer content area automatically handles scrolling for overflow content.