Sheets
A sheet component for slide-out panels that overlay content. Similar to drawers but optimized for desktop use with smooth animations. Supports multiple directions and is perfect for sidebars, settings panels, and detail views.
Installation
Import
Usage
Sheets are ideal for desktop interfaces, providing slide-out panels for settings, details, forms, and secondary content. Use right-side sheets for detail views and settings panels. Use left-side sheets for navigation and filters. Use top/bottom sheets for notifications and quick actions. Sheets provide a non-modal way to display additional content without completely blocking the main interface.
Design Guidelines
Sheets should have clear close buttons and be easily dismissible. Use appropriate widths - side sheets typically use 1/3 to 1/2 of screen width. Include proper headers with titles and descriptions. Use SheetFooter for action buttons. Ensure sheets are accessible with proper focus management and keyboard navigation. Sheets automatically include a close button in the top-right corner. Keep content organized and scannable.
Basic Usage
Simple sheet from the right
From Left
Sheet that slides in from the left
From Top
Sheet that slides in from the top
From Bottom
Sheet that slides in from the bottom
With Form
Sheet containing a form
Sheet
Root sheet component This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | undefined | Controlled open state |
onOpenChange | (open: boolean) => void | undefined | Callback fired when open state changes |
className | string | — | Additional CSS classes to apply to the component |
SheetTrigger
Trigger button that opens the sheet extends Button. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |
SheetContent
Main content container for the sheet This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "right" | Side from which the sheet slides in |
className | string | — | Additional CSS classes to apply to the component |
SheetHeader
Header section container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
SheetTitle
Title text for the sheet This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
SheetDescription
Description text for the sheet This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
SheetFooter
Footer section container This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
SheetClose
Close button component extends Button. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
className | string | — | Additional CSS classes to apply to the component |