Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Extends the Dialog component to display content that complements the main content of the screen.
import {
Sheet,
SheetPopup,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetPopup>
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetPopup>
</Sheet>You can pass side to SheetPopup to change the side of the sheet. By default, it is right.
You can pass variant to SheetPopup to change the variant of the sheet. By default, it is full.
You can create nested sheet within another to create layered panels. Use this pattern for advanced workflows or editing details without losing context.
You can adjust the size of the sheet using CSS classes:
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetPopup className="w-[700px] sm:max-w-[1080px]">
<SheetHeader>
<SheetTitle>Are you absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account
and remove your data from our servers.
</SheetDescription>
</SheetHeader>
</SheetPopup>
</Sheet>You can pass reduceMotion to SheetPopup to reduce the motion of the sheet.