Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Installation
npx solidui-cli@latest add sheet
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger
} from "~/components/ui/sheet"
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Are you sure absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
Position
Use the position
property to <SheetContent />
to indicate the edge of the screen where the component will appear. The values can be top
, right
, bottom
or left
.
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent position="bottom">
<SheetHeader>
<SheetTitle>Are you sure absolutely sure?</SheetTitle>
<SheetDescription>
This action cannot be undone. This will permanently delete your account and remove your data
from our servers.
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
Size
You can adjust the size of the sheet using CSS classes:
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent className="w-[400px] sm:w-[540px]">
<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>
</SheetContent>
</Sheet>