Components
Drawer
A panel that slides in from any edge with a rough line on the exposed side.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/drawer.jsonProps
PropTypeDefaultDescription
children*ReactNode—
Content rendered inside the component.
onOpenChange(open: boolean) => void—
Callback fired when the open state changes.
open*boolean—
Controlled open state.
sideDrawerSide"right"Preferred side or placement.
themeCrumbleTheme"pencil"Overrides the global Crumble theme for this instance.
Sides
The rough line is drawn only on the single exposed edge — left, right (default), top, or bottom.
Size
Control width (left/right) or height (top/bottom) with the size prop — any CSS value.
<DrawerContent size="480px">...</DrawerContent>
<DrawerContent size="40vw">...</DrawerContent>Accessibility
Drawer is still a modal surface, even when it slides from an edge. Keep a clear dismiss action visible and avoid putting essential background context behind it that cannot be reached by keyboard users.
Examples
import { useState } from "react";
import {
Drawer,
DrawerContent,
DrawerHeader,
DrawerTitle,
DrawerBody,
DrawerFooter,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
function Demo() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Open drawer</Button>
<Drawer open={open} onOpenChange={setOpen}>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Settings</DrawerTitle>
</DrawerHeader>
<DrawerBody>Content goes here.</DrawerBody>
<DrawerFooter>
<Button variant="ghost" onClick={() => setOpen(false)}>
Close
</Button>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}