Popover

A floating panel with interactive content, triggered by click.

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6import { Popover } from '@/components/ui/popover';
7
8export function Default() {
9  return (
10    <Popover>
11      <Popover.Trigger asChild>
12        <Button variant="outline">Open Popover</Button>
13      </Popover.Trigger>
14      <Popover.Content showClose>
15        <div className="grid gap-4">
16          <div className="space-y-2">
17            <h4 className="leading-none font-medium">Dimensions</h4>
18            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
19          </div>
20          <div className="grid gap-2">
21            <div className="grid grid-cols-3 items-center gap-4">
22              <Label htmlFor="width">Width</Label>
23              <Input id="width" defaultValue="100%" className="col-span-2" />
24            </div>
25            <div className="grid grid-cols-3 items-center gap-4">
26              <Label htmlFor="height">Height</Label>
27              <Input id="height" defaultValue="25px" className="col-span-2" />
28            </div>
29          </div>
30        </div>
31      </Popover.Content>
32    </Popover>
33  );
34}

Installation

pnpm dlx mateui add popover

Anatomy

1import { Popover } from '@/components/ui/popover';

1<Popover>
2  <Popover.Trigger>Open</Popover.Trigger>
3  <Popover.Content>
4    <p>Interactive content here.</p>
5  </Popover.Content>
6</Popover>

Examples

Default

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Input } from '@/components/ui/input';
5import { Label } from '@/components/ui/label';
6import { Popover } from '@/components/ui/popover';
7
8export function Default() {
9  return (
10    <Popover>
11      <Popover.Trigger asChild>
12        <Button variant="outline">Open Popover</Button>
13      </Popover.Trigger>
14      <Popover.Content showClose>
15        <div className="grid gap-4">
16          <div className="space-y-2">
17            <h4 className="leading-none font-medium">Dimensions</h4>
18            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
19          </div>
20          <div className="grid gap-2">
21            <div className="grid grid-cols-3 items-center gap-4">
22              <Label htmlFor="width">Width</Label>
23              <Input id="width" defaultValue="100%" className="col-span-2" />
24            </div>
25            <div className="grid grid-cols-3 items-center gap-4">
26              <Label htmlFor="height">Height</Label>
27              <Input id="height" defaultValue="25px" className="col-span-2" />
28            </div>
29          </div>
30        </div>
31      </Popover.Content>
32    </Popover>
33  );
34}

API Reference

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial open state.
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.

Popover.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element.

Popover.Content

Prop	Type	Default	Description
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"bottom"`	Placement relative to trigger.
`sideOffset`	`number`	`4`	Offset from the trigger.
`showClose`	`boolean`	`false`	Shows a close button.
`className`	`string`	—	Additional CSS classes.

Popover.Close

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element.

PreviousLabel NextProgress