Question 1

What is a shadcn sheet?

Accepted Answer

A sheet is a modal panel that slides in from an edge of the screen: from the right for details and forms, from the left for navigation and filters, from the top or bottom for short content. It traps focus while open, closes on Escape or a click outside, and locks the page's scroll. shadcn.io's Sheet is built on Base UI, React Aria, Ark UI or Radix UI for React, and on Ark UI for Vue, Svelte and Solid. Each example in this gallery is one self-contained file.

Question 2

Are these sheet examples free?

Accepted Answer

Yes. Every sheet example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 3

Sheet vs Drawer vs Dialog — which one?

Accepted Answer

A Sheet slides in from an edge and keeps part of the page in view, which suits detail panels, filters and settings on any screen. A Drawer is the touch-first version: people drag it, often up from the bottom, and it can stop at snap points. A Dialog is centered and suits short confirmations and focused forms. A common responsive pattern renders a Dialog or Sheet on wide screens and a Drawer on phones, with the same content.

Question 4

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

Accepted Answer

Use a sheet for short tasks where the page behind still matters: editing a row, changing filters, reading a detail. Use a page for long flows, content that needs the whole viewport, or anything people should be able to link to. A sheet keeps people where they were; a route takes them somewhere else.

Question 5

Which side should the sheet anchor to?

Accepted Answer

Right for details and forms, left for navigation and filters, bottom for short choices on small screens, top for announcements or a search bar. Set `side` to `top`, `right`, `bottom` or `left` on `SheetContent`; it defaults to right.

Question 6

How do I build a multi-section sheet?

Accepted Answer

`SheetContent` is a flex column. Put `SheetHeader` first, give the body `flex-1 overflow-y-auto` so it scrolls, and end with `SheetFooter`, which stays at the bottom. The header and footer stay in view however long the body gets.

Question 7

How do I close a sheet after a form is submitted?

Accepted Answer

Control the open state: pass `open` to the sheet, keep it in state, and set it to false once the save succeeds. Leave it open on an error so people can fix the fields. For a plain Cancel button, wrap it in `SheetClose`.

Question 8

How do I install a sheet example?

Accepted Answer

Sign in with a free account and run the install command shown on the example's page. The CLI copies the example into your project, along with the Sheet component and anything else it uses that you don't have yet.

Question 9

How do I make a sheet wider?

Accepted Answer

Pass a class on `SheetContent` that targets its side, such as `data-[side=right]:sm:max-w-md` or `data-[side=right]:sm:max-w-xl`. Left and right sheets fill the height and cap their width from the `sm` breakpoint. Keep some of the page in view, or the sheet stops reading as a panel over it.

Question 10

How do I show a sheet on desktop and a drawer on mobile?

Accepted Answer

Check the viewport width with a media query and render a Sheet or a Drawer with the same content. Keep the open state outside both so switching between them doesn't lose it.

Question 11

Which libraries do sheet examples depend on?

Accepted Answer

shadcn.io's Sheet, which lives in your project, on Base UI, React Aria, Ark UI or Radix UI for React, or on Ark UI for Vue, Svelte and Solid. Styling is Tailwind CSS, and icons come from Lucide. Some examples also use other shadcn.io components, such as Field, Tabs or Avatar.

Question 12

Are sheet examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. A sheet follows the modal dialog pattern: focus moves into it on open and stays there, Tab cycles inside, Escape closes it and focus returns to the trigger. `SheetTitle` names the dialog, so every example renders one, visible or visually hidden. The side is visual only and doesn't change any of this.

Question 13

Can I use these sheet examples with React Server Components?

Accepted Answer

The Sheet is a client component, since it manages its open state and focus. Render it from a Server Component and pass the data it shows as props. Vue, Svelte and Solid render it like any other component.

Sheet Examples

Article Preview Sheet

Notification List Sheet

Order Details Sheet

Product Details Sheet

User Profile View Sheet

Contact Form Sheet

Create New Item Sheet

Multi-Step Form Sheet

Search and Filter Sheet

User Profile Edit Sheet

Sheet with Action Buttons in Footer

Sheet with Header, Content, and Footer

More component examples

Tooltip

Alert Dialog

Context Menu

Dialog

Drawer

Dropdown Menu

Hover Card

Popover

Sheet examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every sheet example. One prompt away.