ascii.cnlibs.com
GithubX

Popover

Rich content in a portal, triggered by a button.

## installation

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

## usage

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@/components/ui/popover";
<Popover>
  <PopoverTrigger render={<Button variant="outline">Settings</Button>} />
  <PopoverContent chWidth={32}>
    <PopoverTitle>Deploy settings</PopoverTitle>
    <PopoverDescription>
      Applies to the next deploy on this branch.
    </PopoverDescription>
    <Label htmlFor="domain" className="mt-[1lh]">Domain</Label>
    <Input id="domain" chWidth={28} defaultValue="ascii-ui.paper.design" />
    <Label htmlFor="region">Region</Label>
    <Input id="region" chWidth={28} defaultValue="iad1" />
    <Button className="self-end">Save</Button>
  </PopoverContent>
</Popover>

## side right

## side top

## align end