Sheet

Installation

Install the Sheet component using the nocta-ui CLI:

npx nocta-ui add sheet

Import the component:

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose
} from '@/components/ui/sheet';

Example

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

Six size options are available: sm, md, lg, xl, and full. The default size is md.

Resizable

Enable the resizable prop to let users drag the sheet edge. Combine it with allowShrink if the sheet should shrink below its initial size.

Api Reference

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
`resizable`	`boolean`	`false`	Display resize handles on the sheet edge
`allowShrink`	`boolean`	`false`	Permit resizing below the initial layout size

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

Sheet

On this page