Recipes
Every recipe is a shadcn registry item. One command writes one file into components/ui/
with shadcn’s default styling applied, wrapping the same primitives the rest of these docs
document. It’s your file after that: restyle it, cut what you don’t need.
bunx shadcn@latest add https://scrollsheet.dev/r/drawer.jsonSwap drawer.json for any item below.
drawer
Section titled “drawer”The shadcn/ui drawer API you already know, backed by scrollsheet instead of vaul:
Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription,
DrawerClose, plus DrawerHandle. Same JSX, but the element is a native <dialog> and
the gesture is CSS scroll-snap.
The shadcn/ui sheet (side panel), same Sheet/SheetTrigger/SheetContent/SheetHeader/
SheetFooter API, with drag-to-dismiss on every edge. One difference: side lives on
<Sheet> (the root), not on SheetContent.
dialog
Section titled “dialog”The shadcn/ui dialog API on scrollsheet’s centered presentation: zoom and fade, no travel,
no detents, a native <dialog> in the top layer instead of Radix.
The built-in toast system as a mount-once Toaster: per-toast DOM, six positions,
stacking, swipe to dismiss, Sonner-compatible API.
confirm
Section titled “confirm”A destructive-action confirmation drawer. dismissible={false} and disableDrag block
swipe, backdrop tap, and Esc, so only its own two buttons can close it.
share-sheet
Section titled “share-sheet”A share drawer with an avatar row for recent contacts and a grid of share targets. Both are plain buttons you wire up yourself.
sidebar
Section titled “sidebar”A left-anchored navigation drawer with a fixed 300px detent: grouped nav sections plus a sign-out row, styled as a sidebar instead of a bottom sheet.