Installation
pnpm dlx shadcn@latest add @cortexcn/sheetUsage
import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "@/components/sheet";Examples
With form
import { Button } from "@/components/button"import { Field, FieldGroup, FieldLabel } from "@/components/field"import { Input } from "@/components/input"import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/sheet"export function SheetWithForm() { return ( <div className="flex flex-col gap-6"> <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="style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8 style-rhea:px-6"> <FieldGroup> <Field> <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel> <Input id="sheet-demo-name" defaultValue="Pedro Duarte" /> </Field> <Field> <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel> <Input id="sheet-demo-username" defaultValue="@peduarte" /> </Field> </FieldGroup> </div> <SheetFooter> <Button type="submit">Save changes</Button> <SheetClose asChild> <Button variant="outline">Close</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> </div> )}No close button
import { Button } from "@/components/button"import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/sheet"export function SheetNoCloseButton() { return ( <div className="flex flex-col gap-6"> <Sheet> <SheetTrigger asChild> <Button variant="outline">No Close Button</Button> </SheetTrigger> <SheetContent showCloseButton={false}> <SheetHeader> <SheetTitle>No Close Button</SheetTitle> <SheetDescription> This sheet doesn't have a close button in the top-right corner. You can only close it using the button below. </SheetDescription> </SheetHeader> </SheetContent> </Sheet> </div> )}Sides
import { Button } from "@/components/button"import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/sheet"const SHEET_SIDES = ["top", "right", "bottom", "left"] as constexport function SheetWithSides() { return ( <div className="flex flex-col gap-6"> <div className="flex flex-wrap gap-2"> {SHEET_SIDES.map((side) => ( <Sheet key={side}> <SheetTrigger asChild> <Button variant="outline" className="capitalize style-sera:uppercase" > {side} </Button> </SheetTrigger> <SheetContent side={side} className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]" > <SheetHeader> <SheetTitle>Edit profile</SheetTitle> <SheetDescription> Make changes to your profile here. Click save when you're done. </SheetDescription> </SheetHeader> <div className="no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6 style-luma:px-6 style-sera:px-8 style-rhea:px-6"> {Array.from({ length: 10 }).map((_, index) => ( <p key={index} className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed style-sera:leading-relaxed" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> ))} </div> <SheetFooter> <Button type="submit">Save changes</Button> <SheetClose asChild> <Button variant="outline">Cancel</Button> </SheetClose> </SheetFooter> </SheetContent> </Sheet> ))} </div> </div> )}Adapted from the shadcn/ui Sheet (MIT).