shadcn.io is not affiliated with official shadcn/ui
Installation
bunx --bun shadcn@latest add https://kit.dev/r/radix/sheet.jsonnpx shadcn@latest add https://kit.dev/r/radix/sheet.jsonpnpm dlx shadcn@latest add https://kit.dev/r/radix/sheet.jsonyarn shadcn@latest add https://kit.dev/r/radix/sheet.jsonThis component depends on Button. Install it first if you haven't already.
Install the following dependencies:
bun add radix-ui tailwind-variants lucide-reactnpm install radix-ui tailwind-variants lucide-reactpnpm add radix-ui tailwind-variants lucide-reactyarn add radix-ui tailwind-variants lucide-reactCopy and paste the following code into your project.
"use client";
import { XIcon } from "lucide-react";
import { Dialog as SheetPrimitive } from "radix-ui";
import type React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/radix/components/button";
export const Sheet = (
props: React.ComponentProps<typeof SheetPrimitive.Root>
) => <SheetPrimitive.Root data-slot="sheet" {...props} />;
export const SheetTrigger = (
props: React.ComponentProps<typeof SheetPrimitive.Trigger>
) => <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
export const SheetClose = (
props: React.ComponentProps<typeof SheetPrimitive.Close>Update the import paths to match your project setup.
Anatomy
SheetTrigger
SheetOverlay
SheetPositioner
SheetContent
SheetTitle
SheetDescription
SheetCloseUsage
import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet";<Sheet>
<SheetTrigger asChild>
<Button variant="outline">Open</Button>
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<div className="grid flex-1 auto-rows-min gap-6 px-4">
<Field className="grid gap-3">
<FieldLabel>Name</FieldLabel>
<Input defaultValue="Pedro Duarte" type="text" />
</Field>
<Field className="grid gap-3">
<FieldLabel>Username</FieldLabel>
<Input defaultValue="@peduarte" type="text" />
</Field>
</div>
<SheetFooter>
<Button type="submit">Save changes</Button>
<SheetClose asChild>
<Button variant="outline">Close</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>Accessibility
| Key | Description |
|---|---|
Enter | Activate the focused control. |
Space | Activate the focused control. |
Demos
Side
Use the side prop on SheetContent to set the edge of the screen where the sheet appears.
No Close Button
Use showCloseButton={false} on SheetContent to hide the close button.
Rtl
Right-to-left sheet. See the RTL configuration guide for document direction.
API Reference
Sheet
PropType
AttributeType
SheetTrigger
PropType
AttributeType
SheetClose
PropType
AttributeType
SheetPortal
PropType
AttributeType
SheetOverlay
PropType
AttributeType
SheetContent
PropType
AttributeType
SheetHeader
PropType
AttributeType
SheetFooter
PropType
AttributeType
SheetTitle
PropType
AttributeType
SheetDescription
PropType
AttributeType