Sheet

Root component for a sheet (side panel). Manages open/closed state and accessibility. Import from "@desk/ui/components/sheet".

Usage

@desk/ui/components/sheet

<Sheet>
  <SheetTrigger asChild>
    <Button emphasis="outline" icon={SlidersHorizontal} tone="neutral">
      Filter materials
    </Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Filter materials</SheetTitle>
      <SheetDescription>
        Narrow the catalogue by finish, origin, and lead time.
      </SheetDescription>
    </SheetHeader>
    <Text className="mt-4" size="sm" variant="muted">
      Showing 128 materials across 14 collections.
    </Text>
    <SheetFooter>
      <Button>Apply filters</Button>
      <Button emphasis="ghost" tone="neutral">
        Reset
      </Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Best practices

Use Sheet for a simple edge panel holding a focused form / settings; a drag-to-dismiss bottom sheet is a Drawer, and nested panels are a Sidepanel.
Set the entry edge via SheetContent side; always render a SheetTitle (wrap in sr-only if hidden) so the panel is announced.

Props

SheetContent

Prop	Type	Default	Description
side	`SheetSide`		Side from which sheet slides in.

SheetDescription

Prop	Type	Default	Description
className	`string`

SheetTitle

Prop	Type	Default	Description
className	`string`

Also exports

componentSheet
constsheetAnatomy
componentSheetClose
componentSheetFooter
componentSheetHeader
componentSheetOverlay
componentSheetPortal
componentSheetTrigger

Anatomy

Sheet

sheet

Slide-out panel from screen edge

SheetTrigger

sheet-trigger

Element that opens sheet

SheetContent

sheet-content

Sheet panel container

SheetHeader

sheet-header

Top section with title/description

SheetTitle

sheet-title

Sheet heading

SheetDescription

sheet-description

Sheet description text

SheetFooter

sheet-footer

Bottom section for actions

SheetClose

sheet-close

Close button

Composition

Used by

Sidebar