Design System/Atoms/Sheet

Sheet

Slide-in panel anchored to a screen edge.

When To Use

  • Use Sheet when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Variant props

side

Key exports

SheetRoot, SheetTrigger, SheetContent, SheetHeader, SheetFooter, SheetTitle

Example Code

import {
  Sheet, SheetTrigger, SheetContent,
  SheetHeader, SheetTitle, SheetDescription,
} from "@hilum/ui"
import { Button } from "@hilum/ui"

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open settings</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Voice settings</SheetTitle>
      <SheetDescription>
        Configure stability, similarity, and style for this voice.
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
// ...trimmed for docs

Sheet

Side panel

Slides in from the right — ideal for settings and detail panels