Sheet
Overlay
Layout
A slide-in panel that appears from any edge of the screen. Perfect for navigation, forms, and detail views.
When to use Sheet vs. Drawer
Use Sheet when you need fully controlled open state, multi-section composition with SheetHeader/SheetContent/SheetFooter, or the floating variant="modal" style — task detail panels, settings sheets, filter builders, complex forms.
Reach for Drawer when you want a simpler declarative API with a built-in trigger prop — quick action menus, mobile side navigation, one-off overlays.
Preview
Open sheets from different sides
Props
Sheet component API reference
| 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 edge the sheet slides from |
size | 'sm' | 'default' | 'lg' | 'xl' | 'full' | 'default' | Sheet width/height (320px/400px/540px/720px/100%) |
variant | 'default' | 'modal' | 'default' | Modal variant adds 48px margin and rounded corners |
showOverlay | boolean | true | Show backdrop overlay |
closeOnOverlayClick | boolean | true | Close when clicking overlay |
closeOnEscape | boolean | true | Close when pressing Escape key |
aria-label | string | — | Accessible label for the sheet (use when there is no SheetTitle) |
Sizes
Control the sheet width or height
Modal Variant
Sheet with 48px margin and rounded corners
Usage
Import and implementation example
import { useState } from 'react'import { Sheet, SheetHeader, SheetTitle, SheetClose, SheetContent, SheetFooter} from '@/components/ui/sheet'import { Button } from '@/components/ui/button'
export default function Example() { const [open, setOpen] = useState(false)
return ( <> <Button onClick={() => setOpen(true)}>Open Sheet</Button>
<Sheet open={open} onOpenChange={setOpen}> <SheetHeader> <SheetTitle>Sheet Title</SheetTitle> <SheetClose onClose={() => setOpen(false)} /> </SheetHeader> <SheetContent> Your content here </SheetContent> <SheetFooter> <Button onClick={() => setOpen(false)}>Close</Button> </SheetFooter> </Sheet> </> )}Features
Built-in functionality
- 4 directions: Slides from left, right, top, or bottom edge
- 5 size options: sm (320px), default (400px), lg (540px), xl (720px), full (100%)
- Modal variant: 48px margin with rounded corners for dialog-like appearance
- Backdrop overlay: Semi-transparent overlay with click-to-close
- Escape key: Close the sheet by pressing Escape
- Body scroll lock: Prevents background scrolling when open
- Smooth animations: CSS transitions for slide-in/out effects
- Dark mode: Full dark mode support
- Focus management: Focus is trapped within the sheet when open
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
role="dialog"aria-modal="true"aria-label (when no SheetTitle)aria-labelledby (linked to SheetTitle)aria-describedby (linked to SheetDescription)Keyboard Navigation
| Key | Action |
|---|---|
| Escape | Close the sheet |
| Tab | Move focus to next focusable element within sheet |
| Shift + Tab | Move focus to previous focusable element |
Notes
- Focus is automatically moved to the sheet when opened
- SheetTitle and SheetDescription are automatically linked via ARIA attributes
- Close button has an accessible label "Close"
- Background content is hidden from screen readers with aria-hidden
- Body scroll is locked to prevent background interaction