MD3 React

Side sheet

A surface anchored to a screen edge for supplementary content or tasks.
import { SideSheet, SideSheetTrigger, SideSheetContent } from "@brijbyte/md3-react/side-sheet";
@import "@brijbyte/md3-react/side-sheet.css";

Side sheets bring in a surface anchored to a screen edge for supplementary content — filters, details about a selected item, settings — that doesn't warrant a full-screen takeover. This is the modal variant: a scrim dims the page, focus is trapped inside, and the sheet dismisses by swiping it toward the edge it's flush with, tapping the scrim, or pressing Escape. SideSheet wraps Base UI's Drawer, anchored to the right edge by default:

<SideSheet>
  <SideSheetTrigger render={<Button variant="filled" />}>Open sheet</SideSheetTrigger>
  <SideSheetContent>
    <Typography variant="title-large">Comments</Typography>
  </SideSheetContent>
</SideSheet>

Basic

A minimal sheet: a trigger and whatever you put inside.

With header and actions

Give the sheet an accessible name with SideSheetTitle, and a SideSheetClose for users who'd rather tap a button than swipe or hit Escape — it renders whatever control you pass it (an IconButton here) and closes the sheet on click in addition to running its own onClick. This example also shows a common content shape from the MD3 guidelines page: an app-settings form of toggle controls.

Content patterns

Another shape straight off the guidelines page — a filter panel with a bottom action row (reset/apply):

Standard (non-modal)

Pass variant="standard" for a sheet that coexists with the page instead of blocking it — no scrim, no focus trap, no scroll lock, and the rest of the page stays interactive beside it. Use it for a persistent detail panel next to a list, rather than a one-off task that needs full attention:

<SideSheet variant="standard" open>
  <SideSheetContent>{/* ... */}</SideSheetContent>
</SideSheet>
Files

  • Q1 report.pdf

  • Budget draft.xlsx

  • Roadmap.fig

  • Notes.md

  • Assets.zip

Anchor

MD3 recommends anchoring to the right edge to avoid colliding with left-anchored navigation components, which is the default. Pass anchor="left" to flip it — the rounded corner (always on the edge facing page content) and the swipe-to-dismiss direction flip along with it.

Accessibility

The sheet traps focus and moves it in on open (to the first tabbable element, or the popup itself if there isn't one) and back to the trigger on close — no extra wiring needed. Give it an accessible name with SideSheetTitle, or an aria-label on SideSheetContent if a visible title doesn't fit the design. Escape and scrim clicks both dismiss the sheet; a SideSheetClose button gives pointer and screen-reader users an explicit dismiss action too.