Drawer

Bottom drawer with sketch pull handle.

Roughness1.5Lock seedAnimate

<Drawer roughness={1.5}>
  <DrawerTrigger asChild>
    <Button variant="outline">Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent>...</DrawerContent>
</Drawer>

CLI install

npx doodleui-react add drawer

Usage

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, Button } from "doodleui-react";

<Drawer>\n  <DrawerTrigger asChild>\n    <Button>Open</Button>\n  </DrawerTrigger>\n  <DrawerContent>\n    <DrawerHeader>\n      <DrawerTitle>Title</DrawerTitle>\n    </DrawerHeader>\n  </DrawerContent>\n</Drawer>

Props

Prop	Type	Default	Notes
animate	boolean	true	Bottom slide-up panel with sketch handle and draw-in border. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.