Components
Sheet
A side or edge panel for focused settings, navigation, and in-context tools that should slide over the current screen.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
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. |