Docs
Sheet
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
Installation
npx shadcn-solid@latest add sheetInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
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>Examples
Side
Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.
Size
You can adjust the size of the sheet using CSS classes:
<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent class="w-400px sm:w-540px">
<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>