Sheet

Opens supporting content in a panel from the edge of the screen.

Installation

Install Sheet from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/sheet

Usage

import {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
} from "@/components/ui/sheet"

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Sheet	The root component that owns the primary structure and state.
SheetTrigger	Controls opening, selection, or disclosure behavior.
SheetClose	Closes the current overlay or disclosure.
SheetContent	Contains the primary visible content.
SheetHeader	Groups heading and introductory content.
SheetFooter	Groups supporting actions or metadata.
SheetTitle	Provides the visible heading for the current region.
SheetDescription	Provides supporting context for the current region.

API Reference

Sheet exports 8 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Sheet Component
SheetTrigger Component
SheetClose Component
SheetContent Component
SheetHeader Component
SheetFooter Component
SheetTitle Component
SheetDescription Component

Accessibility

Sheet inherits focus management and keyboard support from Base UI; keep the provided trigger and content parts together.
Give icon-only triggers an accessible name, retain visible focus styles, and verify Escape and focus-return behavior in the final composition.

Source

Sheet uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Separator Sidebar