Sheet
A slide-in panel that appears from any edge of the screen.
Different Sides
Sheet can slide in from any edge
Different Sizes
Control the sheet width or height
API Reference
Props and usage details
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | - | Whether the sheet is open |
| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
| side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Which side the sheet slides from |
| size | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'default' | Sheet width/height (320px/400px/540px/720px/100%) |
| showOverlay | boolean | true | Show backdrop overlay |
| closeOnOverlayClick | boolean | true | Close when clicking overlay |
| closeOnEscape | boolean | true | Close when pressing Escape |
Features
- Slides from any edge (left, right, top, bottom)
- Multiple size options (sm, default, lg, xl, full)
- Backdrop overlay with click-to-close
- Escape key to close
- Body scroll lock when open
- Smooth slide animations
- Full design system token support
- Dark mode support
- Modal variant with 48px margin and rounded corners
Modal Variant
Sheet with 48px margin and rounded corners (like modals/dialogs)