Sheet
Opens a slide-out panel from the edge of the screen, giving users space to edit settings or fill out forms without leaving the page.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-sheetUsage
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetPopup,
SheetTitle,
SheetTrigger,
} from '@/components/ui/sheet'<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetPopup>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</SheetDescription>
</SheetHeader>
<SheetPanel>Content</SheetPanel>
<SheetFooter>
<SheetClose>Close</SheetClose>
</SheetFooter>
</SheetPopup>
</Sheet>Anatomy
<Sheet>
<SheetTrigger />
<SheetBackdrop />
<SheetPopup>
<SheetHeader>
<SheetTitle />
<SheetDescription />
</SheetHeader>
<SheetPanel />
<SheetFooter>
<SheetClose />
</SheetFooter>
</SheetPopup>
</Sheet>Features
Inset Variant
Sheet sliding with inset border margins (variant="inset").
Positions
Sheet positioned along different screen edges (side="left" | "right" | "top" | "bottom").
Accessibility
- Traps keyboard focus within the slide-out sheet and locks background scrolling.
Keyboard Interactions
| Key | Action |
|---|---|
| Tab | Moves focus through focusable elements in the sheet. |
| Escape | Dismisses the sheet and restores focus to the trigger. |
API Reference
Sheet
Root component. Alias for Dialog.Root from Base UI.
SheetTrigger
Trigger button that opens the sheet. Alias for Dialog.Trigger from Base UI.
SheetPopup
Popup container that displays the sheet content. Also exported as SheetContent.
| Prop | Type | Default | Description |
|---|---|---|---|
side | right|left|top|bottom | right | Controls which side of the screen the sheet opens from |
variant | default|inset | default | Controls the sheet style. inset adds spacing around the sheet on desktop screens |
showCloseButton | boolean | true | When true, displays a close button in the top-right corner |
closeProps | Dialog.Close.Props | - | Props forwarded to the internal close button, useful for overriding aria-label |
portalProps | Dialog.Portal.Props | - | Props forwarded to the internal portal (keepMounted, container, etc.); see Base UI Dialog portal API |
Example:
// Right side sheet (default)
<SheetPopup side="right">
...
</SheetPopup>
// Left side sheet
<SheetPopup side="left">
...
</SheetPopup>
// Top sheet
<SheetPopup side="top">
...
</SheetPopup>
// Bottom sheet
<SheetPopup side="bottom">
...
</SheetPopup>
// Sheet with inset variant
<SheetPopup side="right" variant="inset">
...
</SheetPopup>SheetHeader
Container for the sheet title and description. Supports the render prop for polymorphic composition (e.g. render={<Link href="/" />}).
SheetFooter
Footer section for action buttons. Supports the render prop for polymorphic composition.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|bare | default | Controls the footer styling. default includes border and background, bare removes them |
SheetTitle
Title component. Alias for Dialog.Title from Base UI.
SheetDescription
Description component. Alias for Dialog.Description from Base UI.
SheetPanel
Scrollable content container. Automatically wraps content in a ScrollArea component. Supports the render prop for polymorphic composition.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollFade | boolean | true | When true, shows a fade effect at scroll edges |
Example:
<SheetPanel>
{/* Long content that will scroll if it exceeds the sheet height */}
<div>...</div>
</SheetPanel>SheetClose
Close button component. Alias for Dialog.Close from Base UI.
SheetPortal
Portal component for rendering outside the DOM hierarchy. Alias for Dialog.Portal from Base UI.
SheetBackdrop
Backdrop/overlay component. Also exported as SheetOverlay. Alias for Dialog.Backdrop from Base UI.
SheetViewport
Viewport container that handles screen edge alignment and positioning for the sheet popup. Alias for Dialog.Viewport from Base UI.