NOCTA UI

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/cli add sheet

Import the component:

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

Examples

Default Sheet

Sides

Sizes

Resizable

Api Reference

Sheet

Prop

Type

SheetTrigger

Prop

Type

SheetSurface

Prop

Type

SheetContent

Prop

Type

SheetHeader

Prop

Type

SheetTitle

Prop

Type

SheetDescription

Prop

Type

SheetFooter

Prop

Type

SheetClose

Prop

Type