Preview

Import

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@sigil-ui/components";

Usage

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Settings</SheetTitle>
      <SheetDescription>Manage your preferences.</SheetDescription>
    </SheetHeader>
    <Stack gap={16} className="mt-6">
      <Label htmlFor="name">Name</Label>
      <Input id="name" placeholder="Your name" />
    </Stack>
  </SheetContent>
</Sheet>

Sides

<SheetContent side="left">Left panel</SheetContent>
<SheetContent side="right">Right panel (default)</SheetContent>
<SheetContent side="top">Top panel</SheetContent>
<SheetContent side="bottom">Bottom panel</SheetContent>

Custom width

<SheetContent className="w-[540px]">
  Wide sheet for complex forms.
</SheetContent>

Token integration

CSS Variable	Used for
`--s-surface`	Sheet background
`--s-text`	Title and content color
`--s-text-muted`	Description color
`--s-border`	Sheet edge border
`--s-shadow-xl`	Sheet elevation
`--s-duration-normal`	Slide animation
`--s-ease-default`	Animation easing

Props

SheetContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	Slide-in direction
`className`	`string`	—	Additional CSS classes
`children`	`ReactNode`	—	Sheet content

Accessibility

Focus is trapped inside the sheet when open
Escape closes the sheet and returns focus to trigger
Backdrop click closes the sheet
SheetTitle and SheetDescription wire aria-labelledby and aria-describedby

On this page