Drawer
A modal panel anchored to any window edge
- Export fails on a large board
- Keyboard trap in the palette
- Colour pass for the dark theme
- Slow first paint on Linux
Installation
npx shadcn@latest add @sudokw/components-drawerimport { Drawer } from "@gpuixui/components";Usage
import {
Drawer,
DrawerClose,
DrawerContent,
DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@gpuixui/components/drawer";
<Drawer>
<DrawerTrigger>Filters</DrawerTrigger>
<DrawerContent label="Filters" side="right" size="md">
<DrawerHeader>
<DrawerTitle>Filters</DrawerTitle>
<DrawerDescription>Narrow the result set.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose variant="ghost">Cancel</DrawerClose>
<DrawerClose variant="primary">Apply filters</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>;Composition
Drawer
├── DrawerTrigger
└── DrawerContent
├── DrawerHeader
│ ├── DrawerTitle
│ └── DrawerDescription
├── DrawerFooter
│ └── DrawerClose
└── (close control)API reference
Drawer
| Prop | Type | Default | Consequence |
|---|---|---|---|
open | boolean | uncontrolled | controlled state; omit to let the drawer keep its own |
defaultOpen | boolean | false | the initial state when uncontrolled |
onOpenChange | (open: boolean) => void | none | reports the next state; a controlled drawer does not move until the caller re-renders |
dismissible | boolean | true | whether Escape and an outside press close the surface; the close control is unaffected |
children | parts | none | DrawerTrigger, DrawerClose and DrawerContent |
DrawerContent
| Prop | Type | Default | Consequence |
|---|---|---|---|
label | string (required) | none | the dialog's accessible name |
side | "left" | "right" | "top" | "bottom" | "right" | the edge the surface is anchored to; a stored name the union does not carry opens on the default "right" edge |
size | "sm" | "md" | "lg" | "md" | the requested width or height, clamped by the window; a stored name the union does not carry paints the house "md" box |
showClose | boolean | true | renders the close control, a @gpuixui/icons x named "Close drawer" |
inset | number | none | a top sheet hangs this far below the window's top, centred and at most the window's width less 80 — AppKit's sheet under the toolbar |
grabber | boolean | true | paints the vaul handle on a top or bottom sheet; a column never shows one |
initialFocus | () => number | null | none | the native id to focus after the surface receives focus |
className | string | none | compiled through @gpuixui/tw and joined after the recipe |
children | parts | none | the header, title, description, body and footer |
Keyboard
- Escape
- dismisses the drawer
- Tab
- keeps focus inside the drawer
read from modal.ts
Edit this page on GitHubapps/docs/content/docs/components/drawer.mdx