Components
Sheet
A side or edge panel for focused settings, navigation, and in-context tools that should slide over the current screen.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add sheet to your project.
watermelon add sheet2
Import the component
Import Sheet from your local UI registry output.
Import
import { Sheet } from "@/components/ui/sheet";Import
Import
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";Usage
Sheets are great for side panels and focused utility surfaces that should feel lighter than a full page transition.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | Chooses which edge the sheet enters from. |