Popover

Displays rich content in a portal, triggered by a button.

1
import { Button } from "@/components/ui/pxl/button";
2
import { Input } from "@/components/ui/pxl/input";
3
import { Label } from "@/components/ui/pxl/label";
4
import {
5
  Popover,
6
  PopoverContent,
7
  PopoverDescription,
8
  PopoverHeader,
9
  PopoverTitle,
10
  PopoverTrigger,
11
} from "@/components/ui/pxl/popover";
12

13
export default function PopoverDemo() {
14
  return (
15
    <Popover>
16
      <PopoverTrigger render={<Button>Open popover</Button>} />
17
      <PopoverContent className="w-80">
18
        <PopoverHeader>
19
          <PopoverTitle>Dimensions</PopoverTitle>
20
          <PopoverDescription>
21
            Set the dimensions for the layer.
22
          </PopoverDescription>
23
        </PopoverHeader>
24
        <div className="grid gap-2">
25
          <div className="grid grid-cols-3 items-center gap-4">
26
            <Label htmlFor="width">Width</Label>
27
            <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
28
          </div>
29
          <div className="grid grid-cols-3 items-center gap-4">
30
            <Label htmlFor="maxWidth">Max. width</Label>
31
            <Input
32
              id="maxWidth"
33
              defaultValue="300px"
34
              className="col-span-2 h-8"
35
            />
36
          </div>
37
          <div className="grid grid-cols-3 items-center gap-4">
38
            <Label htmlFor="height">Height</Label>
39
            <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
40
          </div>
41
          <div className="grid grid-cols-3 items-center gap-4">
42
            <Label htmlFor="maxHeight">Max. height</Label>
43
            <Input
44
              id="maxHeight"
45
              defaultValue="none"
46
              className="col-span-2 h-8"
47
            />
48
          </div>
49
        </div>
50
      </PopoverContent>
51
    </Popover>
52
  );
53
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/popover

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
"use client";
2

3
import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
4
import type { ComponentProps } from "react";
5

6
import { cn } from "@/lib/utils";
7

8
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
9
  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
10
}
11

12
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
13
  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
14
}
15

16
function PopoverContent({
17
  className,
18
  align = "center",
19
  alignOffset = 0,
20
  side = "bottom",
21
  sideOffset = 4,
22
  ...props
23
}: PopoverPrimitive.Popup.Props &
24
  Pick<
25
    PopoverPrimitive.Positioner.Props,
26
    "align" | "alignOffset" | "side" | "sideOffset"
27
  >) {
28
  return (
29
    <PopoverPrimitive.Portal>
30
      <PopoverPrimitive.Positioner
31
        align={align}
32
        alignOffset={alignOffset}
33
        side={side}
34
        sideOffset={sideOffset}
35
        className="isolate z-50"
36
      >
37
        <PopoverPrimitive.Popup
38
          data-slot="popover-content"
39
          className={cn(
40
            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 pixel-rounded pixel-border pixel-size-[5px] pixel-color-[color-mix(in_oklab,var(--foreground)_10%,transparent)] bg-popover p-4 text-sm text-popover-foreground outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
41
            className,
42
          )}
43
          {...props}
44
        />
45
      </PopoverPrimitive.Positioner>
46
    </PopoverPrimitive.Portal>
47
  );
48
}
49

50
function PopoverHeader({ className, ...props }: ComponentProps<"div">) {
51
  return (
52
    <div
53
      data-slot="popover-header"
54
      className={cn("flex flex-col gap-1 text-sm", className)}
55
      {...props}
56
    />
57
  );
58
}
59

60
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
61
  return (
62
    <PopoverPrimitive.Title
63
      data-slot="popover-title"
64
      className={cn("font-heading", className)}
65
      {...props}
66
    />
67
  );
68
}
69

70
function PopoverDescription({
71
  className,
72
  ...props
73
}: PopoverPrimitive.Description.Props) {
74
  return (
75
    <PopoverPrimitive.Description
76
      data-slot="popover-description"
77
      className={cn("text-muted-foreground", className)}
78
      {...props}
79
    />
80
  );
81
}
82

83
export {
84
  Popover,
85
  PopoverContent,
86
  PopoverDescription,
87
  PopoverHeader,
88
  PopoverTitle,
89
  PopoverTrigger,
90
};

Update the import paths to match your project setup.

Composition

Use the following composition to build a Popover:

Popover
├── PopoverTrigger
└── PopoverContent

API Reference

See the Base UI Popover documentation.