Drawer

Overlays

A panel that slides in from the edge of the screen. Use drawers for secondary content, settings panels, or detailed views that don't warrant a full page.

Import

import { 
  Drawer, 
  DrawerHeader, 
  DrawerTitle, 
  DrawerBody, 
  DrawerFooter 
} from "@/components/ui/drawer";

Usage

Basic Drawer

Simple drawer from the right

Settings Drawer

Drawer with form controls

API Reference

PropTypeDefaultDescription
open*boolean—Whether the drawer is open
onClose*() => void—Handler called when drawer should close
side"left" | "right""right"Side from which the drawer appears
size"sm" | "md" | "lg""md"Width of the drawer

Related Components

DialogPopover