Sheet

Edge-anchored slide-out panel (default: right).

Roughness1.5Lock seedAnimate

<Sheet roughness={1.5}>
  <SheetTrigger asChild>
    <Button variant="outline">Open sheet</Button>
  </SheetTrigger>
  <SheetContent>...</SheetContent>
</Sheet>

CLI install

npx doodleui-react add sheet

Usage

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, Button } from "doodleui-react";

<Sheet>\n  <SheetTrigger asChild>\n    <Button>Open</Button>\n  </SheetTrigger>\n  <SheetContent>\n    <SheetHeader>\n      <SheetTitle>Title</SheetTitle>\n    </SheetHeader>\n  </SheetContent>\n</Sheet>

Props

Prop	Type	Default	Notes
side	"top" \| "right" \| "bottom" \| "left"	"right"	Edge the sheet slides from.
animate	boolean	true	Backdrop fade, slide motion, and border draw-in. 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.