ascii.cnlibs.com
GithubX

Sheet

Extends the dialog to display content on the edge.

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/sheet.json

## usage

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
<Sheet>
  <SheetTrigger render={<Button variant="outline">Edit project</Button>} />
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Edit project</SheetTitle>
      <SheetDescription>
        Update the name and default branch for this project.
      </SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-[1lh] px-[2ch]">
      <div className="flex flex-col">
        <Label htmlFor="name">Project name</Label>
        <Input id="name" chWidth={28} defaultValue="ascii-ui" />
      </div>
      <div className="flex flex-col">
        <Label htmlFor="branch">Default branch</Label>
        <Input id="branch" chWidth={28} defaultValue="main" />
      </div>
    </div>
    <SheetFooter>
      <Button>Save changes</Button>
      <SheetClose render={<Button variant="outline">Cancel</Button>} />
    </SheetFooter>
  </SheetContent>
</Sheet>

## left

## top

## bottom

## without close button

showCloseButton={false} drops the [x]; escape, the backdrop and SheetClose still dismiss it.