Sheet
Slide-in panel from any edge, using popover=manual and @starting-style animations
Category: overlay · WCAG 2.2-AA · overlay, drawer, panel, slide
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether the component is open (controlled). |
onClose | () => void | — | Called when the component is closed. |
title | React.ReactNode | — | Title text for the component. |
side | 'start' | 'end' | 'top' | 'bottom' | end | Edge the component is anchored to. |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-lg--cascivo-shadow-xl--cascivo-motion-enter--cascivo-motion-exit
When to use
- Showing secondary content or a form in a panel that slides in from a screen edge
- Navigation, filters, or detail views that benefit from full-height side space without leaving the page
- Mobile-friendly drawers where a centered modal would feel cramped
When not to use
- A short confirmation or focused decision — use Modal or AlertDialog
- Small contextual content anchored to a trigger — use Popover
How to build an accessible Sheet in React →
Examples
Basic
<Sheet open={isOpen} onClose={() => setIsOpen(false)} title="Filters">
<FilterForm />
</Sheet>Bottom sheet
<Sheet open={isOpen} onClose={close} side="bottom" title="Share">
<ShareOptions />
</Sheet>