Question 1

What is a shadcn drawer?

Accepted Answer

A shadcn drawer is a sliding panel anchored to a screen edge — typically the bottom on mobile (think iOS bottom sheets), but configurable to top, left, or right. It's built on vaul by Emil Kowalski (the React drawer primitive used by linear.app, vercel.com, and dub.co) wrapped in shadcn/ui's Drawer styling. Drag-to-dismiss, snap points, momentum scrolling, and smooth spring animations all work out of the box.

Question 2

Are these drawer examples free?

Accepted Answer

Yes, every drawer example on shadcn.io is free for personal and commercial use. No attribution requirement, no runtime dependency, no gating. vaul itself is MIT-licensed too.

Question 3

How is a Drawer different from a Sheet or a Dialog?

Accepted Answer

All three are modal overlays. Dialog is centered on the screen (desktop modal). Sheet slides in from an edge (desktop side panels — right for details, left for filters). Drawer slides up from the bottom on mobile with a drag handle, snap points, and rubber-band resistance. The shadcn pattern is to render Dialog on desktop AND Drawer on mobile via a media-query gate — same content, two presentations. See the responsive shadcn-ui patterns for the canonical implementation.

Question 4

When should I use a Drawer instead of a full-page route on mobile?

Accepted Answer

Drawer for short-task interactions where the underlying page context matters — quick actions, filter panels, single-form submissions, detail views you'll dismiss after reading. Full-page route for multi-step flows, content that benefits from the full viewport, or actions that should produce a deep-linkable URL. Drawers preserve the user's place; routes navigate them away.

Question 5

How do I anchor the drawer to a different edge (top / left / right)?

Accepted Answer

Pass `direction="top" | "bottom" | "left" | "right"` to the Drawer root. Bottom is the most common (mobile-native), but right is useful for details panels that complement a list view, and left for navigation drawers. The drag handle position and animation direction adjust automatically based on the prop.

Question 6

How do I add snap points (half-open / fully-open)?

Accepted Answer

vaul supports `snapPoints={['148px', '355px', 1]}` — a mix of pixel values and fractions of viewport height. Users can drag between snap points and the drawer settles to the nearest. Pair with `activeSnapPoint` and `setActiveSnapPoint` for programmatic control. Common pattern: a peek state that shows just the title bar, a half-open state for browsing, and a full-open state for detailed reading.

Question 7

How do I prevent the drawer from being dismissed by drag?

Accepted Answer

Pass `dismissible={false}` to the Drawer root. Users can no longer drag to close — they must hit an explicit Cancel / Confirm button. Use this for destructive confirmations or any action where accidental dismissal would lose work. Pair with `modal={false}` if you want the page underneath to remain interactive while the drawer is open (rare; usually you want the full modality).

Question 8

How do I install a drawer example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/drawer/…`, plus the shadcn/ui Drawer primitive (and its vaul dependency) if you don't already have them.

Question 9

How do I render a Drawer on mobile and Dialog on desktop?

Accepted Answer

Build a small media-query hook (`useMediaQuery('(min-width: 768px)')`) and conditionally render Dialog or Drawer with the same content. The shadcn community has a published `useMediaQuery` snippet you can copy. Keep the trigger button outside the conditional — it's the same button regardless of which modal type opens. This pattern is the de facto standard for responsive modals in shadcn/ui apps.

Question 10

How do I scroll content inside a drawer?

Accepted Answer

vaul handles scroll natively — the drawer body is the scrollable region. For nested ScrollArea components, set `data-vaul-no-drag` on the inner scrollable to tell vaul to stop intercepting touch events for drag. Otherwise scrolling the inner area would also drag the drawer down. The data attribute is the official escape hatch for nested-scroll cases.

Question 11

Which libraries do drawer examples depend on?

Accepted Answer

vaul by Emil Kowalski (the drawer engine — drag, snap points, momentum, focus management), shadcn/ui Drawer (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (icons inside drawer headers). React 19 baseline. For form-in-drawer examples, react-hook-form + Zod + shadcn/ui Form are the canonical pairing.

Question 12

Are drawer examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. vaul implements the WAI-ARIA Dialog (Modal) pattern — focus trap inside the drawer, ESC dismisses (when `dismissible`), Tab cycles within. The drag handle has `role="button"` with `aria-label="Resize drawer"`. Screen readers announce the DrawerTitle on open. Touch users drag from the handle; keyboard users tab into the drawer and use Cancel / Confirm buttons.

Question 13

Can I use these drawer examples with React Server Components?

Accepted Answer

The Drawer is a client component (it manages open state, drag interactions, snap point logic). Wrap it inside a Server Component parent and pass content as props. For drawers showing server-fetched data, fetch on the server and pass the data into the client-boundary drawer. The page layout stays server-rendered; only the modal itself goes client-side.

React Drawer Examples for shadcn/ui

Browse every drawer example

Frequently Asked Questions