Drawer

A panel that slides in from the edge of the screen for focused workflows.

#Installation

npx @dinachi/cli@latest add drawer

#Usage

tsx

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

#Examples

#API Reference

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the drawer root.
defaultOpen	boolean	false	The initial open state for uncontrolled usage.
onOpenChange	(open: boolean) => void	—	Callback fired when the drawer open state changes.
DrawerContent.side	'top' \| 'right' \| 'bottom' \| 'left'	'right'	Controls which side the drawer enters from.