Layout UI

Drawer

Bottom sheet with native drag-to-dismiss. Built on Base UI Drawer. Includes a drag handle bar and swipe gesture support.

Preview

Installation

bash
npx shadcn@latest add @layout/drawer

Usage

tsx
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from "@/components/ui/drawer"

Examples

Grid actions

Guidelines for AI agents

Use for mobile-first action sheets, contextual menus, and bottom panels where touch swipe-to-dismiss is important. On desktop, prefer Sheet for side panels or Dialog for centred modals. Mount DrawerContent inside Drawer; the drag handle is rendered automatically inside DrawerContent.

Never

  • Neveruse Drawer for full-page flows on desktop — use Dialog or Sheet
  • Neveruse Drawer for critical destructive confirmations — use AlertDialog
  • Neverhide the drag handle unless the interaction is purely button-driven
  • Neverset a fixed height taller than 90dvh; content should scroll within DrawerContent

Tokens consumed

--layout-overlay--layout-overlay-fg--layout-border--layout-shadow-lg--layout-radius--layout-duration-slow--layout-muted-fg