Installation
pnpm dlx shadcn@latest add @cortexcn/popoverUsage
import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/popover";Examples
Basic
import { Button } from "@/components/button"import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/popover"export function PopoverBasic() { return ( <div className="flex flex-col gap-6"> <Popover> <PopoverTrigger asChild> <Button variant="outline">Open Popover</Button> </PopoverTrigger> <PopoverContent align="start"> <PopoverHeader> <PopoverTitle>Dimensions</PopoverTitle> <PopoverDescription> Set the dimensions for the layer. </PopoverDescription> </PopoverHeader> </PopoverContent> </Popover> </div> )}With form
import { Button } from "@/components/button"import { Field, FieldGroup, FieldLabel } from "@/components/field"import { Input } from "@/components/input"import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/popover"export function PopoverWithForm() { return ( <div className="flex flex-col gap-6"> <Popover> <PopoverTrigger asChild> <Button variant="outline">Open Popover</Button> </PopoverTrigger> <PopoverContent className="w-64" align="start"> <PopoverHeader> <PopoverTitle>Dimensions</PopoverTitle> <PopoverDescription> Set the dimensions for the layer. </PopoverDescription> </PopoverHeader> <FieldGroup className="gap-4"> <Field orientation="horizontal"> <FieldLabel htmlFor="width" className="w-1/2"> Width </FieldLabel> <Input id="width" defaultValue="100%" /> </Field> <Field orientation="horizontal"> <FieldLabel htmlFor="height" className="w-1/2"> Height </FieldLabel> <Input id="height" defaultValue="25px" /> </Field> </FieldGroup> </PopoverContent> </Popover> </div> )}Alignments
import { Button } from "@/components/button"import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover"export function PopoverAlignments() { return ( <div className="flex flex-col gap-6"> <div className="flex gap-6"> <Popover> <PopoverTrigger asChild> <Button variant="outline" size="sm"> Start </Button> </PopoverTrigger> <PopoverContent align="start" className="w-40"> Aligned to start </PopoverContent> </Popover> <Popover> <PopoverTrigger asChild> <Button variant="outline" size="sm"> Center </Button> </PopoverTrigger> <PopoverContent align="center" className="w-40"> Aligned to center </PopoverContent> </Popover> <Popover> <PopoverTrigger asChild> <Button variant="outline" size="sm"> End </Button> </PopoverTrigger> <PopoverContent align="end" className="w-40"> Aligned to end </PopoverContent> </Popover> </div> </div> )}In dialog
import { Button } from "@/components/button"import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/dialog"import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/popover"export function PopoverInDialog() { return ( <div className="flex flex-col gap-6"> <Dialog> <DialogTrigger asChild> <Button variant="outline">Open Dialog</Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Popover Example</DialogTitle> <DialogDescription> Click the button below to see the popover. </DialogDescription> </DialogHeader> <Popover> <PopoverTrigger asChild> <Button variant="outline" className="w-fit"> Open Popover </Button> </PopoverTrigger> <PopoverContent align="start"> <PopoverHeader> <PopoverTitle>Popover in Dialog</PopoverTitle> <PopoverDescription> This popover appears inside a dialog. Click the button to open it. </PopoverDescription> </PopoverHeader> </PopoverContent> </Popover> </DialogContent> </Dialog> </div> )}Adapted from the shadcn/ui Popover (MIT).