Sheet

1import { Button } from "@/components/ui/button"2import {3  Sheet,4  SheetClose,5  SheetContent,6  SheetDescription,7  SheetFooter,8  SheetHeader,9  SheetTitle,10  SheetTrigger,11} from "@/components/ui/sheet"1213export function Example() {14  return (15    <Sheet>16      <SheetTrigger asChild>17        <Button variant="outline">Open</Button>18      </SheetTrigger>19      <SheetContent>20        <SheetHeader>21          <SheetTitle>Edit profile</SheetTitle>22          <SheetDescription>23            Make changes to your profile here. Click save when you&apos;re done.24          </SheetDescription>25        </SheetHeader>26        <div className="grid gap-4 px-4">27          <div className="grid gap-1.5">28            <label htmlFor="sheet-name" className="text-sm tracking-wide">29              Name30            </label>31            <input32              id="sheet-name"33              defaultValue="Carol Williams"34              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide"35            />36          </div>37          <div className="grid gap-1.5">38            <label htmlFor="sheet-username" className="text-sm tracking-wide">39              Username40            </label>41            <input42              id="sheet-username"43              defaultValue="@peduarte"44              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide"45            />46          </div>47        </div>48        <SheetFooter>49          <Button type="submit" className="transition-colors">50            Save changes51          </Button>52          <SheetClose asChild>53            <Button variant="outline" className="transition-colors">54              Close55            </Button>56          </SheetClose>57        </SheetFooter>58      </SheetContent>59    </Sheet>60  )61}

1import { Button } from "@/components/ui/button"2import {3  Sheet,4  SheetClose,5  SheetContent,6  SheetDescription,7  SheetFooter,8  SheetHeader,9  SheetTitle,10  SheetTrigger,11} from "@/components/ui/sheet"1213export function Example() {14  return (15    <Sheet>16      <SheetTrigger asChild>17        <Button variant="outline">Open</Button>18      </SheetTrigger>19      <SheetContent>20        <SheetHeader>21          <SheetTitle>Edit profile</SheetTitle>22          <SheetDescription>23            Make changes to your profile here. Click save when you&apos;re done.24          </SheetDescription>25        </SheetHeader>26        <div className="grid gap-4 px-4">27          <div className="grid gap-1.5">28            <label htmlFor="sheet-name" className="text-sm tracking-wide">29              Name30            </label>31            <input32              id="sheet-name"33              defaultValue="Carol Williams"34              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide"35            />36          </div>37          <div className="grid gap-1.5">38            <label htmlFor="sheet-username" className="text-sm tracking-wide">39              Username40            </label>41            <input42              id="sheet-username"43              defaultValue="@peduarte"44              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide"45            />46          </div>47        </div>48        <SheetFooter>49          <Button type="submit" className="transition-colors">50            Save changes51          </Button>52          <SheetClose asChild>53            <Button variant="outline" className="transition-colors">54              Close55            </Button>56          </SheetClose>57        </SheetFooter>58      </SheetContent>59    </Sheet>60  )61}

1import { Button } from "@/components/ui/button"2import {3  Sheet,4  SheetClose,5  SheetContent,6  SheetDescription,7  SheetFooter,8  SheetHeader,9  SheetTitle,10  SheetTrigger,11} from "@/components/ui/sheet"1213const SIDES = ["top", "right", "bottom", "left"] as const1415const sideCopy = {16  top: {17    title: "What’s new this week",18    description:19      "A short tour of the updates that landed since your last visit — nothing you have to act on right away.",20    body: [21      "We’ve shipped a quieter notifications panel, faster search across your workspace, and clearer activity history so you can pick up where you left off without digging through old threads.",22      "Shared links now open with the right permission prompt, and comment mentions include a bit more context so you know why someone pulled you in.",23      "If something looks off after the update, you can roll individual features back from Settings → Experiments while we keep polishing the defaults.",24    ],25  },26  right: {27    title: "Project details",28    description:29      "Context that stays beside your canvas so you don’t lose place jumping between tabs.",30    body: [31      "Status, owners, and recent updates stay in view while you edit. Use this panel when you need a quick check without leaving the document you’re already reading.",32      "Timeline events are sorted newest first. Expand any row for the full note, attachments, and who made the change — useful when you’re catching up after time away.",33      "You can pin this sheet open while you work, or close it anytime. Nothing here edits the file until you choose an action at the bottom.",34    ],35  },36  bottom: {37    title: "Confirm before you leave",38    description:39      "You still have unsaved edits on this page. Take a second before discarding them.",40    body: [41      "Closing now will drop the draft you’ve been working on, including comments that haven’t been posted yet and any fields you changed in the last few minutes.",42      "If you meant to keep going, stay on this page and finish reviewing. When you’re ready, save from the main toolbar — this sheet is only a warning, not a commit.",43      "Sure you want to leave? Confirm below and we’ll return you to the previous view without storing this draft.",44    ],45  },46  left: {47    title: "Browse the library",48    description:49      "Collections, filters, and saved views — without covering the canvas you’re editing.",50    body: [51      "Pick a section here, then keep working on the right. The library stays in one continuous flow so you can jump between references without losing selection in the main editor.",52      "Starred items float to the top of each collection. Filters remember the last combination you used in this workspace, so opening the panel again should feel familiar.",53      "Need something new? Create a collection from the footer, or close this sheet and search from the command menu if you already know the name.",54    ],55  },56} as const5758export function Example() {59  return (60    <div className="flex flex-wrap gap-2">61      {SIDES.map((side) => {62        const copy = sideCopy[side]63        return (64          <Sheet key={side}>65            <SheetTrigger asChild>66              <Button variant="outline" className="capitalize">67                {side}68              </Button>69            </SheetTrigger>70            <SheetContent side={side}>71              <SheetHeader>72                <SheetTitle>{copy.title}</SheetTitle>73                <SheetDescription>{copy.description}</SheetDescription>74              </SheetHeader>75              <div className="grid gap-3 overflow-y-auto px-4 text-sm tracking-wide text-muted-foreground">76                {copy.body.map((paragraph) => (77                  <p key={paragraph.slice(0, 24)}>{paragraph}</p>78                ))}79              </div>80              <SheetFooter>81                <Button type="button" className="transition-colors">82                  Continue83                </Button>84                <SheetClose asChild>85                  <Button variant="outline" className="transition-colors">86                    Close87                  </Button>88                </SheetClose>89              </SheetFooter>90            </SheetContent>91          </Sheet>92        )93      })}94    </div>95  )96}

1import { Button } from "@/components/ui/button"2import {3  Sheet,4  SheetContent,5  SheetDescription,6  SheetHeader,7  SheetTitle,8  SheetTrigger,9} from "@/components/ui/sheet"1011export function Example() {12  return (13    <Sheet>14      <SheetTrigger asChild>15        <Button variant="outline">Open Sheet</Button>16      </SheetTrigger>17      <SheetContent showCloseButton={false}>18        <SheetHeader>19          <SheetTitle>No close button</SheetTitle>20          <SheetDescription>21            This sheet hides the default close control. Dismiss with Escape or22            by clicking the overlay.23          </SheetDescription>24        </SheetHeader>25      </SheetContent>26    </Sheet>27  )28}