What is Side sheet?

A side sheet is a vertical panel that enters from the side of the screen and holds supplementary content: the details of a selected row, a form to create or edit a record, a preview of a file, a help article. The main content stays visible, so the user keeps their place in a list while working on one item. Material Design named the pattern, and most admin tools, CRMs and email clients use it, often without calling it anything.

Modal or standard

• A modal side sheet slides over the page with a scrim and blocks it. Use it on narrow screens, or when the sheet holds a form that should be finished or cancelled.
• A standard side sheet sits beside the content, pushes it aside or resizes it, and leaves the page usable. Use it on wide screens for details panels and inspectors, as in a mail client.
• Compared with a [drawer](/glossary/drawer), a side sheet is content, not a menu. Navigation and quick actions belong in a drawer; records, forms and previews belong in a sheet.
• Compared with a [modal dialog](/glossary/modal-dialog), a sheet holds a longer form and scrolls, and the user can still glance at the list it came from.

Anatomy

A header with a title and a close button, a scrollable body, and an optional footer with the primary action pinned so it stays reachable on long forms. Width is usually 360 to 480px on desktop and the full viewport on phones, where a side sheet behaves like a page. Change the URL when a sheet shows a record, so reloading or sharing the link reopens the same item.

Accessibility

A modal sheet is a dialog: role="dialog", aria-modal="true", a name from its title, focus moved into the panel on open, a focus trap while open, Escape to close and focus returned to the opener. A standard sheet is a landmark instead: a section or aside with aria-label, opened by a button that carries aria-expanded, and no trap, since the page is meant to stay usable. In both cases the close button needs a target of at least 24 by 24 CSS pixels and a name such as "Close details".

How to build one in React

MiniDev's Sheet renders the scrim, the title bar and the close button, moves focus into the panel on open, closes on Escape and hands focus back on close. It slides from the right by default:

"use client"
import * as React from "react"
import { Sheet } from "@/components/ui/sheet"

type Invoice = { id: string; customer: string }

export function InvoiceDetails({ invoice, onClose }: { invoice?: Invoice; onClose: () => void }) {
  return (
    <Sheet open={Boolean(invoice)} onClose={onClose} side="right" title={invoice ? "Invoice " + invoice.id : undefined}>
      {invoice ? <p className="text-sm">Customer: {invoice.customer}</p> : null}
    </Sheet>
  )
}

Drive open from the selected row so clicking another row swaps the content instead of stacking sheets. For a non-modal inspector that stays open beside a table, see PeekPanel and CollapsibleSidebar. More overlay patterns are in the overlays category.