Sheet

Overlay

Layout

A slide-in panel that appears from any edge of the screen. Perfect for navigation, forms, and detail views.

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

Related Components

Dialog Drawer Modal Popover