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,
} from "@/components/ui/drawer"

#Examples

Default Drawer

A drawer panel with form content sliding from the right

Drawer Sides

Drawers can slide in from any edge of the screen

Navigation Drawer

Drawer used as a sidebar navigation panel

#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.