Sheet
A panel that slides out from the edge of the screen.
Installation
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@sourceful-energy/ui"Usage
Examples
Device Settings
Side: Left
Side: Top
Side: Bottom
Props
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | The controlled open state of the sheet. |
| defaultOpen | boolean | false | The default open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | - | Callback when the open state changes. |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | The side of the screen the sheet appears from. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Dialog for full accessibility
- Focus is trapped within the sheet
- Escape key closes the sheet
- Background scroll is locked when open
- Announces content to screen readers