Docs/Sheet

Sheet

Slide-in panel from any edge. Uses native dialog element. Includes header, title, description, footer, close sub-components.

Usage

tsx

1import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetClose } from '@storm-ds/ui'
2
3const ref = useRef<HTMLDialogElement>(null)
4
5<Button onClick={() => ref.current?.showModal()}>Open</Button>
6<Sheet ref={ref} side="right">
7  <SheetContent>
8    <SheetClose onClick={() => ref.current?.close()} />
9    <SheetHeader>
10      <SheetTitle>Panel Title</SheetTitle>
11    </SheetHeader>
12    <p>Content here</p>
13  </SheetContent>
14</Sheet>

Right (default)

Left

Bottom

Props

Prop	Type	Default	Description
side	'left' \| 'right' \| 'top' \| 'bottom'	'right'	Edge to slide from
size	'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'	'md'	Panel width/height
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Sheet. Import: `import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@storm-ds/ui'`. Uses native `<dialog>` - open with `ref.current?.showModal()`, close with `ref.current?.close()`. Props: side (left/right/top/bottom), size (sm/md/lg/xl/full). Client component needed for ref. Example: `<Sheet ref={ref} side="right" size="lg"><SheetContent>...</SheetContent></Sheet>`

Tooltip

Drawer