Extends the Dialog component to display content that slides in from the edge of the screen.
Preview
Installation
Usage
Examples
Different Sides
With Form
Props
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "start" | "end" | "end" | The side from which the sheet slides in |
Accessibility
Keyboard Navigation
- Esc - Close the sheet
- Tab - Navigate between focusable elements within the sheet
ARIA Attributes
- role="dialog" on the sheet content
- aria-describedby links to the description
- aria-labelledby links to the title
- Focus is trapped within the sheet when open
- Focus returns to trigger element when closed
RTL Support
The Sheet component is fully RTL-compatible with automatic side adaptation.
- side="start" automatically positions on the right in RTL mode
- side="end" automatically positions on the left in RTL mode
- Slide animations follow the correct direction
- Close button positions correctly
- Content layout respects text direction
Use Cases
Mobile navigation panels
Filter and settings sidebars
Detail views that slide in from the edge
Shopping cart or notification panels
Best Practices
Do
- ✓ Use appropriate side (start for nav, end for details)
- ✓ Include a close button and overlay click to dismiss
- ✓ Keep sheet content focused and scrollable
Don't
- ✗ Don't use for small confirmations — use Dialog instead
- ✗ Don't make sheets wider than 80% of viewport
- ✗ Don't block critical page functionality behind a sheet