Drawer
Panel that slides in from a screen edge; the bottom sheet can be dragged down to close.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
DrawerProps
Also accepts all props of Omit<React.ComponentProps<"dialog">, "open" | "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| open* required | boolean | — | — |
| onOpenChange* required | (open: boolean) => void | — | — |
| title* required | React.ReactNode | — | — |
| description | React.ReactNode | — | — |
| footer | React.ReactNode | — | — |
| side | Side | "right" | — |
| size | number | 400 | Width for side drawers, height for bottom ones, in px |
Install
$ npx shadcn@latest add https://chromotion.dev/r/drawer.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.