Docs
Sheet
Sheet
Extends the Dialog component to display content that complements the main content of the screen.
import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/default/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@repo/tailwindcss/default/sheet";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
const SheetDemo = () => {
return (
<Sheet>
<SheetTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<SheetFooter>
<Button type="submit">Save changes</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
};
export default SheetDemo;import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/solid/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@repo/tailwindcss/solid/sheet";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
const SheetDemo = () => {
return (
<Sheet>
<SheetTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
Open
</Button>
)}
/>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<SheetFooter>
<Button type="submit">Save changes</Button>
</SheetFooter>
</SheetContent>
</Sheet>
);
};
export default SheetDemo;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.
import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/default/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@repo/tailwindcss/default/sheet";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/default/textfield";
import { For } from "solid-js";
const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;
const SheetSide = () => {
return (
<div class="grid grid-cols-2 gap-2">
<For each={SHEET_SIDES}>
{(side) => (
<Sheet>
<SheetTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
{side}
</Button>
)}
/>
<SheetContent side={side}>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're
done.
</SheetDescription>
</SheetHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<SheetFooter>
<Button type="submit">Save changes</Button>
</SheetFooter>
</SheetContent>
</Sheet>
)}
</For>
</div>
);
};
export default SheetSide;import type { DialogTriggerProps } from "@kobalte/core/dialog";
import { Button } from "@repo/tailwindcss/solid/button";
import {
Sheet,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@repo/tailwindcss/solid/sheet";
import {
TextField,
TextFieldLabel,
TextFieldRoot,
} from "@repo/tailwindcss/solid/textfield";
import { For } from "solid-js";
const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;
const SheetSide = () => {
return (
<div class="grid grid-cols-2 gap-2">
<For each={SHEET_SIDES}>
{(side) => (
<Sheet>
<SheetTrigger
as={(props: DialogTriggerProps) => (
<Button variant="outline" {...props}>
{side}
</Button>
)}
/>
<SheetContent side={side}>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're
done.
</SheetDescription>
</SheetHeader>
<div class="grid gap-4 py-4">
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Name</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
<TextFieldRoot class="grid grid-cols-3 items-center gap-4 md:grid-cols-4">
<TextFieldLabel class="text-right">Username</TextFieldLabel>
<TextField class="col-span-2 md:col-span-3" />
</TextFieldRoot>
</div>
<SheetFooter>
<Button type="submit">Save changes</Button>
</SheetFooter>
</SheetContent>
</Sheet>
)}
</For>
</div>
);
};
export default SheetSide;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>