Sheet

Installation

Install the Sheet component using the nocta-ui CLI:

Terminal

npx nocta-ui add sheet

Then import the component:

Import

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.

Controlled State

You can control the Sheet's open state programmatically.

Closed

Props

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 dialog role and aria-modal attributes
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

Sheet

On this page