Components
Sheet
A panel that slides in from an edge. It is a Dialog: same focus handling, Escape, backdrop and scroll lock.
Client componentUses state or handlers, so it starts with "use client".
import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from "@glob-ui/sheet"Preview
Examples
Sides
side is right (default), left, top or bottom. Top and bottom are full width.
Sizes
size is sm, md (default) or lg for left and right. It does not apply to top and bottom.
API
Props are generated from the TypeScript types in the package source.
Sheet
Prop
Type
SheetTrigger
Prop
Type
SheetContent
Prop
Type
SheetClose
Prop
Type
Accessibility
| Key or action | Behaviour |
|---|---|
| Enter, Space on the trigger | Opens the sheet. Focus moves inside. |
| Tab, Shift+Tab | Cycle inside the sheet. The page behind is inert. |
| Escape | Closes the sheet and returns focus to the trigger. |
| Backdrop click | Closes the sheet. |
ARIA. The sheet is a modal dialog named by SheetTitle and described by SheetDescription. Always include a title. Build your own modal on the same behaviour with DialogContentBase from @glob-ui/dialog.