Sheet
A slide-out panel component that can be triggered from any side of the screen
Installation
Install the Sheet component using the nocta-ui CLI:
npx nocta-ui add sheetThen import the component:
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
SheetFooter,
SheetClose
} from '@/components/ui/sheet';Basic Usage
The Sheet component provides a slide-out panel that can appear from any side of the screen.
Sides
The Sheet can slide in from any side of the screen: left, right, top, or bottom.
Sizes
Five size options are available: sm, md, lg, xl, and full. The default size is md.
Form Example
Perfect for forms and data entry interfaces.
Navigation Example
Great for mobile navigation menus and sidebar navigation.
Controlled State
You can control the Sheet's open state programmatically.
Closed
Customization
You can customize the Sheet's appearance and behavior extensively.
Props
Sheet
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Sheet content including trigger and content components |
open | boolean | — | Controlled open state |
onOpenChange | (open: boolean) => void | — | Callback when open state changes |
SheetTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Trigger content |
asChild | boolean | false | Render as child element |
className | string | '' | Additional CSS classes |
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Sheet content |
className | string | '' | Additional CSS classes |
side | 'left' | 'right' | 'top' | 'bottom' | 'right' | Side from which sheet slides in |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Sheet size |
showClose | boolean | true | Show default close button |
SheetHeader, SheetTitle, SheetDescription, SheetFooter
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content |
className | string | '' | Additional CSS classes |
SheetClose
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | 'Close' | Button content |
className | string | '' | Additional CSS classes |
asChild | boolean | false | Render as child element |
Accessibility
The Sheet component follows WAI-ARIA guidelines:
- Uses proper
dialogrole andaria-modalattributes - Implements focus trapping within the sheet
- Supports keyboard navigation (Tab, Shift+Tab, Escape)
- Maintains focus management when opening/closing
- Provides screen reader announcements
- Supports click-outside-to-close functionality