Sheet
A dialog positioned along an edge of the viewport.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Sheet
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/sheet.json'Usage
A complete example using the installed component and hook paths.
Sheet usage
"use client";import { Button } from "@/components/ui/button";import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";function SheetPreview() { return ( <Sheet> <SheetTrigger render={<Button variant="outline" />}>Open sheet</SheetTrigger> <SheetContent> <SheetHeader> <SheetTitle>Example sheet</SheetTitle> <SheetDescription>A panel at the edge of the screen.</SheetDescription> </SheetHeader> <SheetFooter> <SheetClose render={<Button variant="outline" />}>Close</SheetClose> </SheetFooter> </SheetContent> </Sheet> );}export default function Demo() { return <SheetPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Sheet
Sheet props
SheetPrimitive.Root.PropsSheetTrigger
SheetTrigger props
SheetPrimitive.Trigger.Props & { sound?: boolean }- sound
- true
SheetClose
SheetClose props
SheetPrimitive.Close.Props & { sound?: boolean }- sound
- true
SheetContent
SheetContent props
SheetPrimitive.Popup.Props & { side?: "top" | "right" | "bottom" | "left"; showCloseButton?: boolean;}- side
- "right"
- showCloseButton
- true
SheetHeader
SheetHeader props
React.ComponentProps<"div">SheetFooter
SheetFooter props
React.ComponentProps<"div">SheetTitle
SheetTitle props
SheetPrimitive.Title.PropsSheetDescription
SheetDescription props
SheetPrimitive.Description.Props