Sheet
A side panel that slides in from the edge of the screen.
Installation
Usage
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetPanel,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit Profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<SheetPanel>Content goes here</SheetPanel>
<SheetFooter>
<SheetClose>Cancel</SheetClose>
<Button>Save</Button>
</SheetFooter>
</SheetContent>
</Sheet>API Reference
Sheet
Root component. Alias for Dialog.Root from Base UI.
SheetTrigger
Trigger button that opens the sheet. Alias for Dialog.Trigger from Base UI.
SheetContent
Popup container that displays the sheet content. Also exported as SheetPopup.
SheetHeader
Container for the sheet title and description.
SheetFooter
Footer section for action buttons.
SheetTitle
Title component. Alias for Dialog.Title from Base UI.
SheetDescription
Description component. Alias for Dialog.Description from Base UI.
SheetPanel
Scrollable content container.
SheetClose
Close button component. Alias for Dialog.Close from Base UI.
SheetPortal
Portal component for rendering outside the DOM hierarchy. Alias for Dialog.Portal from Base UI.
SheetBackdrop
Backdrop/overlay component. Also exported as SheetOverlay. Alias for Dialog.Backdrop from Base UI.