Question 1

What is a shadcn sheet?

Accepted Answer

A shadcn sheet is the side-panel modal that slides in from a screen edge — right edge for detail panels and forms, left for filters and navigation, top for command bars, bottom for mobile-style drawers. It's built on Radix UI's Dialog primitive (focus trap, ESC dismiss, scroll lock) styled with shadcn/ui as an edge-anchored slide-in. Each example in this gallery is a single self-contained TSX file.

Question 2

Are these sheet examples free?

Accepted Answer

Yes, every sheet example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Sheet vs Drawer vs Dialog — which one?

Accepted Answer

Sheet is desktop-first edge-anchored slide-in (right for details, left for filters). Drawer is mobile-first bottom-sheet (vaul-based, with drag handle and snap points). Dialog is centered modal overlay. The shadcn pattern: render Sheet on desktop AND Drawer on mobile via media query gate (the canonical responsive modal pattern). Same content, two presentations.

Question 4

When should I use a sheet versus a full-page route?

Accepted Answer

Sheet for short tasks where the underlying page context matters — filter editing, quick form, member detail panel, settings rows. Full-page route for multi-step flows, content that benefits from the full viewport, or actions that should produce a deep-linkable URL. Sheets preserve the user's place; routes navigate them away. Most modern dashboards use sheets liberally for in-flow editing.

Question 5

Which side should the sheet anchor to?

Accepted Answer

Right for detail panels (clicking a row → details slide in from the right) and forms ("Add member" button → form slides in). Left for navigation and filters (sidebar-style, common on dashboards). Bottom for mobile-style drawers (small actions, confirmations). Top is rare but works for command bars (Cmd+K full-width). Pass `side="right" | "left" | "top" | "bottom"` to SheetContent.

Question 6

How do I render a multi-section settings sheet?

Accepted Answer

Use the settings variant. Sheet header with the section title, scrollable body with FormFields grouped under sub-headings, sticky footer with Save / Cancel actions. The body uses ScrollArea so long forms scroll inside the sheet without dismissing it. The footer is sticky so save controls stay visible regardless of scroll position.

Question 7

How do I show a form inside a sheet without losing data on outside-click?

Accepted Answer

Lift the sheet's `open` state to a controlled state. On outside-click (`onPointerDownOutside`), check if the form is dirty (`form.formState.isDirty`) and prompt with an AlertDialog ("Discard unsaved changes?") instead of immediately closing. For sheets with critical data, set `dismissible={false}` so users can only close via Cancel/Save buttons.

Question 8

How do I install a sheet 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/sheet/…`, plus the shadcn/ui Sheet primitive (and its Radix Dialog dependency) if you don't already have it.

Question 9

How do I size the sheet wider for richer content?

Accepted Answer

Pass className overrides to SheetContent — `className="sm:max-w-md"` for a narrow sheet, `"sm:max-w-xl"` for a roomier panel, `"sm:max-w-3xl"` for a detail-rich panel. Default for right/left sheets is `sm:max-w-sm`. Don't make sheets full-screen-width on desktop — the modality cue ("there's something underneath") gets lost. Keep at least 30% of the viewport showing the page underneath.

Question 10

How do I render a sheet on mobile and dialog on desktop?

Accepted Answer

Use a media query hook (`useMediaQuery('(min-width: 768px)')`) and conditionally render Sheet or Dialog with the same content. shadcn's responsive modal pattern wraps both in a `<Modal>` abstraction that picks the right primitive per breakpoint. For sheets-on-mobile + sheets-on-desktop apps (no dialog), just Sheet works on both — the side prop adapts naturally.

Question 11

Which libraries do sheet examples depend on?

Accepted Answer

Radix UI Dialog (the underlying primitive — focus trap, ESC dismiss, scroll lock, ARIA-modal), shadcn/ui Sheet (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (X icon for close). For form-in-sheet examples, react-hook-form + Zod + shadcn/ui Form are the canonical pairing. React 19 baseline.

Question 12

Are sheet examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Sheet inherits the WAI-ARIA Dialog pattern from Radix: focus trap, ESC dismisses (firing onOpenChange), Tab cycles within. The overlay applies `aria-hidden` to the rest of the page. Screen readers announce the SheetTitle on open. Edge-anchored sheets keep the same accessibility semantics — orientation is purely visual.

Question 13

Can I use these sheet examples with React Server Components?

Accepted Answer

Sheet is a client component (it manages open state, focus, scroll lock). Wrap it inside a Server Component layout. For sheets showing server-fetched data ("Edit member X"), pass the data as props from the server into the client-boundary sheet. The Sheet's chrome stays client-side; the content can be a server-rendered tree.

React Sheet Examples for shadcn/ui

Browse every sheet example

Frequently Asked Questions