Drawer
A draggable bottom sheet with rubber-band physics, snap points, and flick-to-dismiss.
◆ Northwind Goods
Studio Headphones
$349
Aurora Watch
$429
Mechanical Keyboard
$189
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/drawer.json"Drawer is a controlled, portalled sheet. Drag the handle down (or flick) past the
threshold to dismiss; it also closes on scrim click and Escape, and locks body
scroll while open. Use side="right" for a side panel.
Usage
tsx
"use client";
import { Drawer } from "@/components/godui/drawer";
import { useState } from "react";
export function Example() {
const [open, setOpen] = useState(false);
return (
<>
<button onClick={() => setOpen(true)}>Open</button>
<Drawer open={open} onOpenChange={setOpen} side="right" title="Settings">
<p>Drawer content</p>
</Drawer>
</>
);
}Examples
Bottom sheet
Set side="bottom" for a mobile-style sheet — drag the handle (or flick) down to
dismiss. Great for share menus, quick actions, and confirmations.
Aurora Design System
Invite collaborators to this project
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Called when the drawer opens or closes. |
side | "bottom" | "right" | "bottom" | Side the drawer slides in from. |
title | ReactNode | — | Accessible title rendered at the top. |
className | string | — | Extra classes for the panel. |