Sheets

Sheet is a modal panel that slides in from an edge of the screen over a scrim. It defaults to the right edge but can anchor to any side. Reach for it when you need more room than a popover but want to keep the user in context: filters, detail views, and side forms all fit well.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: sheet.tsx

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
  Button,
} from "@beacon/design-system";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose asChild>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Parts

Part	Role
Sheet	Root state container. Accepts open and onOpenChange for controlled use.
SheetTrigger	Element that opens the sheet. Use asChild to wrap your own button.
SheetContent	The sliding panel. Takes a side prop and renders a built-in close button.
SheetHeader	Layout wrapper for the title and description.
SheetTitle	Accessible heading announced to screen readers.
SheetDescription	Supporting text under the title.
SheetFooter	Action row, right-aligned on larger screens.
SheetClose	Dismisses the sheet. Use asChild to make a custom element close it.
SheetPortal	Renders content into a portal at the document root.
SheetOverlay	The backdrop scrim. Included automatically by SheetContent.

side values

Value	Edge
right	Slides in from the right (default).
left	Slides in from the left.
top	Slides down from the top.
bottom	Slides up from the bottom.

When to use

• Filter panels, detail views, and side forms that need more width than a popover.
• Secondary tasks where the user should keep sight of where they came from.
• A bottom-anchored mobile-style choice list (see Action Sheets, which uses this same component with side="bottom").

Do not use a Sheet for a focused, page-blocking task that belongs dead center: use a Dialog instead.