Geist Design System

Sheet

Display content in a side panel that slides in from the edge of the screen.

Default

In combination with styles overrides most commonly used in front apps.

With Side

Use the side prop to control which edge the sheet slides in from.

Best Practices

When to use

  • Use Sheet for persistent associated context like deployment details, log row inspection, or a member profile, where the underlying page stays useful.
  • For a blocking decision, use Modal. For a mobile-only bottom sheet, use Drawer.
  • Don’t use Sheet to confirm destructive actions. The default modal=false keeps the page interactive, which weakens severity for a delete or revoke.

Behavior

  • Sheet defaults to modal=false so toasts and other high-z elements stay reachable. Keep that default unless the sheet owns the screen.
  • Pick side from the trigger location: a row inspector slides from right, a global filter from left. Don’t change sides mid-session.
  • Outside-click does not auto-close, so always render an explicit close affordance and honor Escape.

Content

  • Title is Title Case and names the entity (Deployment Details, Member Profile), not the page action.
  • Body is read-mostly: sentence case prose with Title Case sub-headings. Action buttons are optional; when present, follow Verb + Noun.
  • Don’t duplicate the page header inside the sheet; the sheet is the detail layer.

Accessibility

  • Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list.
  • Provide a visible close button labeled Close (or an icon button with aria-label="Close") since clicking outside doesn’t dismiss.
  • Announce the sheet with aria-labelledby pointing at the title; pair it with aria-describedby only when the body is short and load-bearing.