Sheet

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Inspect resource details or settings without leaving the current list, such as the item a card or a row opens. Put long content, tabs included, in Body, which scrolls independently.

Don't repeat the same content across stacked panels. Keep each detail in one panel.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Root(side) → Trigger → Content → Header / Body / Footer

Keyboard and accessibility

Focus trapping, Escape, and focus restoration work as in Dialog. A Select inside the panel closes first.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Sheet, Button } from '@surflane/ui'

<Sheet.Root side='right'>
  <Sheet.Trigger render={<Button />}>Details</Sheet.Trigger>
  <Sheet.Content closeLabel='Close details'>
    <Sheet.Header>
      <Sheet.Title>Environment</Sheet.Title>
      <Sheet.Description>Preview details.</Sheet.Description>
    </Sheet.Header>
    <Sheet.Body>Resource details</Sheet.Body>
    <Sheet.Footer>
      <Sheet.Close render={<Button />}>Done</Sheet.Close>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens