Popover | arctis/ui

A portaled panel for short forms, useful details, or a few actions.

tsx

1import { Button } from "@/components/ui/button"2import {3  Popover,4  PopoverContent,5  PopoverDescription,6  PopoverHeader,7  PopoverTitle,8  PopoverTrigger,9} from "@/components/ui/popover"1011export function Example() {12  return (13    <Popover>14      <PopoverTrigger asChild>15        <Button variant="outline">Open Popover</Button>16      </PopoverTrigger>17      <PopoverContent>18        <PopoverHeader>19          <PopoverTitle>Dimensions</PopoverTitle>20          <PopoverDescription>21            Set the dimensions for the layer.22          </PopoverDescription>23        </PopoverHeader>24      </PopoverContent>25    </Popover>26  )27}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add popover

Usage

1import { Button } from "@/components/ui/button"2import {3  Popover,4  PopoverContent,5  PopoverDescription,6  PopoverHeader,7  PopoverTitle,8  PopoverTrigger,9} from "@/components/ui/popover"

1<Popover>2  <PopoverTrigger asChild>3    <Button variant="outline">Open Popover</Button>4  </PopoverTrigger>5  <PopoverContent>6    <PopoverHeader>7      <PopoverTitle>Dimensions</PopoverTitle>8      <PopoverDescription>Set width and height for the canvas.</PopoverDescription>9    </PopoverHeader>10  </PopoverContent>11</Popover>

Composition

Popover
├── PopoverTrigger
└── PopoverContent
    └── PopoverHeader
        ├── PopoverTitle
        └── PopoverDescription

Basic

A simple panel with a title and description.

tsx

1import { Button } from "@/components/ui/button"2import {3  Popover,4  PopoverContent,5  PopoverDescription,6  PopoverHeader,7  PopoverTitle,8  PopoverTrigger,9} from "@/components/ui/popover"1011export function Example() {12  return (13    <Popover>14      <PopoverTrigger asChild>15        <Button variant="outline">Open Popover</Button>16      </PopoverTrigger>17      <PopoverContent>18        <PopoverHeader>19          <PopoverTitle>Dimensions</PopoverTitle>20          <PopoverDescription>21            Set the dimensions for the layer.22          </PopoverDescription>23        </PopoverHeader>24      </PopoverContent>25    </Popover>26  )27}

Align

Set align on PopoverContent to start, center, or end relative to the trigger.

tsx

1import { Button } from "@/components/ui/button"2import {3  Popover,4  PopoverContent,5  PopoverDescription,6  PopoverHeader,7  PopoverTitle,8  PopoverTrigger,9} from "@/components/ui/popover"1011export function Example() {12  return (13    <div className="flex flex-wrap items-center justify-center gap-2">14      <Popover>15        <PopoverTrigger asChild>16          <Button variant="outline">Start</Button>17        </PopoverTrigger>18        <PopoverContent align="start">19          <PopoverHeader>20            <PopoverTitle>Start</PopoverTitle>21            <PopoverDescription>Aligned to the start.</PopoverDescription>22          </PopoverHeader>23        </PopoverContent>24      </Popover>25      <Popover>26        <PopoverTrigger asChild>27          <Button variant="outline">Center</Button>28        </PopoverTrigger>29        <PopoverContent align="center">30          <PopoverHeader>31            <PopoverTitle>Center</PopoverTitle>32            <PopoverDescription>Aligned to the center.</PopoverDescription>33          </PopoverHeader>34        </PopoverContent>35      </Popover>36      <Popover>37        <PopoverTrigger asChild>38          <Button variant="outline">End</Button>39        </PopoverTrigger>40        <PopoverContent align="end">41          <PopoverHeader>42            <PopoverTitle>End</PopoverTitle>43            <PopoverDescription>Aligned to the end.</PopoverDescription>44          </PopoverHeader>45        </PopoverContent>46      </Popover>47    </div>48  )49}

With Form

Add labeled inputs below the header for a compact form.

tsx

1import { Button } from "@/components/ui/button"2import {3  Popover,4  PopoverContent,5  PopoverDescription,6  PopoverHeader,7  PopoverTitle,8  PopoverTrigger,9} from "@/components/ui/popover"1011export function Example() {12  return (13    <Popover>14      <PopoverTrigger asChild>15        <Button variant="outline">Open Popover</Button>16      </PopoverTrigger>17      <PopoverContent>18        <PopoverHeader>19          <PopoverTitle>Dimensions</PopoverTitle>20          <PopoverDescription>21            Set the dimensions for the layer.22          </PopoverDescription>23        </PopoverHeader>24        <div className="grid gap-3">25          <div className="grid gap-1.5">26            <label htmlFor="width" className="text-sm tracking-wide">27              Width28            </label>29            <input30              id="width"31              defaultValue="100%"32              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide text-foreground placeholder:text-muted-foreground"33            />34          </div>35          <div className="grid gap-1.5">36            <label htmlFor="height" className="text-sm tracking-wide">37              Height38            </label>39            <input40              id="height"41              defaultValue="25px"42              className="h-9 w-full rounded-md border border-border bg-transparent px-3 text-sm tracking-wide text-foreground placeholder:text-muted-foreground"43            />44          </div>45        </div>46      </PopoverContent>47    </Popover>48  )49}

API Reference

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—

1<Popover>2  <PopoverTrigger asChild>3    <Button variant="outline">Open</Button>4  </PopoverTrigger>5  <PopoverContent>6    <PopoverHeader>7      <PopoverTitle>Title</PopoverTitle>8      <PopoverDescription>Description</PopoverDescription>9    </PopoverHeader>10  </PopoverContent>11</Popover>

PopoverTrigger

Pass asChild to merge props onto a child element such as Button. Click toggles open state.

Prop	Type	Default
asChild	boolean	false
className	string	—

1<PopoverTrigger asChild>2  <Button variant="outline">Open</Button>3</PopoverTrigger>

PopoverContent

Portaled panel. Closes on Escape or outside click.

Prop	Type	Default
align	"start" \| "center" \| "end"	"center"
side	"top" \| "bottom" \| "left" \| "right"	"bottom"
sideOffset	number	6
className	string	—

1<PopoverContent>2  Content3</PopoverContent>

PopoverHeader

Prop	Type	Default
className	string	—

1<PopoverHeader>2  <PopoverTitle>Title</PopoverTitle>3  <PopoverDescription>Description</PopoverDescription>4</PopoverHeader>

PopoverTitle

Sets aria-labelledby on the dialog when present.

Prop	Type	Default
className	string	—

1<PopoverTitle>Title</PopoverTitle>

PopoverDescription

Sets aria-describedby on the dialog when present.

Prop	Type	Default
className	string	—

1<PopoverDescription>Description</PopoverDescription>