shadcn/ui Sheet vs Drawer
Use a Sheet for side panels on desktop, like filters, settings, or navigation. Use a Drawer for bottom panels on mobile that people can drag to dismiss. In shadcn/ui, a Sheet extends the Dialog component to slide in from an edge, and a Drawer is a gesture-driven panel.
Side by side
| Sheet | Drawer | |
|---|---|---|
| Built on | Dialog | Base UI drawer by default, or Vaul with the Radix base |
| Opens from | Top, right, bottom, or left | Usually the bottom |
| Gestures | None | Drag to dismiss |
| Best for | Desktop side panels | Mobile action sheets |
A note on Vaul
The Radix version of the shadcn Drawer is built on Vaul, which its README now marks as unmaintained. New shadcn/ui projects use the Base UI drawer instead, and the shadcn docs include a migration guide.
A common pattern
Many apps render a Sheet on desktop and a Drawer on mobile for the same content, switching on a media query. See Watermelon sheet components and dialog components for ready-made variants.