Sheet

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>

<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent side="right">
  <SheetHeader>
    <SheetTitle>Edit profile</SheetTitle>
    <SheetDescription>
      Make changes to your profile here. Click save when you're done.
    </SheetDescription>
  </SheetHeader>
  <div className="grid gap-4 py-4">
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="name" className="text-right">
        Name
      </Label>
      <Input id="name" className="col-span-3" />
    </div>
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="username" className="text-right">
        Username
      </Label>
      <Input id="username" className="col-span-3" />
    </div>
  </div>
  <SheetFooter>
    <SheetClose asChild>
      <Button type="submit">Save changes</Button>
    </SheetClose>
  </SheetFooter>
</SheetContent>
</Sheet>