Popover

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

Kobalte

The Popover component is built on top of Kobalte Popover, which provides accessible dialog, keyboard, and focus behavior.

1
import { Button } from "~/components/ui/button";
2
import { Input } from "~/components/ui/input";
3
import { Label } from "~/components/ui/label";
4
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
5

6
export default function PopoverDemo() {
7
  return (
8
    <Popover>
9
      <PopoverTrigger as={Button} variant="outline">
10
        Open popover
11
      </PopoverTrigger>
12
      <PopoverContent class="w-80">
13
        <div class="grid gap-4">
14
          <div class="space-y-2">
15
            <h4 class="leading-none font-medium">Dimensions</h4>
16
            <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
17
          </div>
18
          <div class="grid gap-2">
19
            <div class="grid grid-cols-3 items-center gap-4">
20
              <Label for="popover-demo-width">Width</Label>
21
              <Input id="popover-demo-width" defaultValue="100%" class="col-span-2 h-8" />
22
            </div>
23
            <div class="grid grid-cols-3 items-center gap-4">
24
              <Label for="popover-demo-max-width">Max. width</Label>
25
              <Input id="popover-demo-max-width" defaultValue="300px" class="col-span-2 h-8" />
26
            </div>
27
            <div class="grid grid-cols-3 items-center gap-4">
28
              <Label for="popover-demo-height">Height</Label>
29
              <Input id="popover-demo-height" defaultValue="25px" class="col-span-2 h-8" />
30
            </div>
31
            <div class="grid grid-cols-3 items-center gap-4">
32
              <Label for="popover-demo-max-height">Max. height</Label>
33
              <Input id="popover-demo-max-height" defaultValue="none" class="col-span-2 h-8" />
34
            </div>
35
          </div>
36
        </div>
37
      </PopoverContent>
38
    </Popover>
39
  );
40
}

Installation

pnpm dlx shadcn@latest add @zaidan/popover
npx shadcn@latest add @zaidan/popover
yarn dlx shadcn@latest add @zaidan/popover
bunx --bun shadcn@latest add @zaidan/popover

Usage

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

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

See the Kobalte Popover documentation for primitive-level options, accessibility, and keyboard behavior.

Composition

Use the following composition to build a Popover:

Popover
├── PopoverTrigger
└── PopoverContent

Basic

A simple popover with a header, title, and description.

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

11
export default function PopoverBasic() {
12
  return (
13
    <Popover placement="bottom-start">
14
      <PopoverTrigger as={Button} variant="outline" class="w-fit">
15
        Open Popover
16
      </PopoverTrigger>
17
      <PopoverContent>
18
        <PopoverHeader>
19
          <PopoverTitle>Dimensions</PopoverTitle>
20
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
21
        </PopoverHeader>
22
      </PopoverContent>
23
    </Popover>
24
  );
25
}

Align

Use the placement prop on Popover (e.g. bottom-start, bottom, bottom-end) to control the horizontal alignment.

1
import { Button } from "~/components/ui/button";
2
import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
3

4
export default function PopoverAlignments() {
5
  return (
6
    <div class="flex gap-6">
7
      <Popover placement="bottom-start">
8
        <PopoverTrigger as={Button} variant="outline" size="sm">
9
          Start
10
        </PopoverTrigger>
11
        <PopoverContent class="w-40">Aligned to start</PopoverContent>
12
      </Popover>
13
      <Popover placement="bottom">
14
        <PopoverTrigger as={Button} variant="outline" size="sm">
15
          Center
16
        </PopoverTrigger>
17
        <PopoverContent class="w-40">Aligned to center</PopoverContent>
18
      </Popover>
19
      <Popover placement="bottom-end">
20
        <PopoverTrigger as={Button} variant="outline" size="sm">
21
          End
22
        </PopoverTrigger>
23
        <PopoverContent class="w-40">Aligned to end</PopoverContent>
24
      </Popover>
25
    </div>
26
  );
27
}

With Form

A popover with form fields inside.

1
import { Button } from "~/components/ui/button";
2
import { Field, FieldGroup, FieldLabel } from "~/components/ui/field";
3
import { Input } from "~/components/ui/input";
4
import {
5
  Popover,
6
  PopoverContent,
7
  PopoverDescription,
8
  PopoverHeader,
9
  PopoverTitle,
10
  PopoverTrigger,
11
} from "~/components/ui/popover";
12

13
export default function PopoverForm() {
14
  return (
15
    <Popover>
16
      <PopoverTrigger as={Button} variant="outline">
17
        Open Popover
18
      </PopoverTrigger>
19
      <PopoverContent class="w-64">
20
        <PopoverHeader>
21
          <PopoverTitle>Dimensions</PopoverTitle>
22
          <PopoverDescription>Set the dimensions for the layer.</PopoverDescription>
23
        </PopoverHeader>
24
        <FieldGroup class="gap-4">
25
          <Field orientation="horizontal">
26
            <FieldLabel for="popover-form-width" class="w-1/2">
27
              Width
28
            </FieldLabel>
29
            <Input id="popover-form-width" defaultValue="100%" />
30
          </Field>
31
          <Field orientation="horizontal">
32
            <FieldLabel for="popover-form-height" class="w-1/2">
33
              Height
34
            </FieldLabel>
35
            <Input id="popover-form-height" defaultValue="25px" />
36
          </Field>
37
        </FieldGroup>
38
      </PopoverContent>
39
    </Popover>
40
  );
41
}

API Reference

See the Kobalte Popover API reference for primitive props, keyboard behavior, and accessibility details.