ascii.cnlibs.com
GithubX

Dialog

A window overlaid on the primary content.

## installation

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

## usage

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
<Dialog>
  <DialogTrigger render={<Button>Invite teammate</Button>} />
  <DialogContent chWidth={44}>
    <DialogHeader>
      <DialogTitle>Invite teammate</DialogTitle>
      <DialogDescription>
        They'll get an email with a link to join this project.
      </DialogDescription>
    </DialogHeader>
    <Label htmlFor="email" className="mt-[1lh]">Email</Label>
    <Input id="email" chWidth={40} placeholder="sam@paper.design" />
    <DialogFooter showCloseButton>
      <Button>Send invite</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

## compact

A narrower frame without the [x]; DialogClose in the footer dismisses it.

## wide

chWidth sets the frame width in characters (default 46).