Popover

Contextual details on demand. Non-blocking UI. Keep context.

default.tsx

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
8const dimensions = [
9  { id: 'width', label: 'Width', defaultValue: '100%' },
10  { id: 'height', label: 'Height', defaultValue: '25px' },
11] as const;
12
13export function Default() {
14  return (
15    <Popover>
16      <Popover.Trigger asChild>
17        <Button variant="outline">Open Popover</Button>
18      </Popover.Trigger>
19      <Popover.Content showClose>
20        <div className="grid gap-4">
21          <div className="space-y-2">
22            <h4 className="leading-none font-medium">Dimensions</h4>
23            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
24          </div>
25          <div className="grid gap-2">
26            {dimensions.map((dim) => (
27              <div key={dim.id} className="grid grid-cols-3 items-center gap-4">
28                <Label htmlFor={dim.id}>{dim.label}</Label>
29                <Input id={dim.id} defaultValue={dim.defaultValue} className="col-span-2" />
30              </div>
31            ))}
32          </div>
33        </div>
34      </Popover.Content>
35    </Popover>
36  );
37}

Installation

pnpm dlx nachui 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

default.tsx

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
8const dimensions = [
9  { id: 'width', label: 'Width', defaultValue: '100%' },
10  { id: 'height', label: 'Height', defaultValue: '25px' },
11] as const;
12
13export function Default() {
14  return (
15    <Popover>
16      <Popover.Trigger asChild>
17        <Button variant="outline">Open Popover</Button>
18      </Popover.Trigger>
19      <Popover.Content showClose>
20        <div className="grid gap-4">
21          <div className="space-y-2">
22            <h4 className="leading-none font-medium">Dimensions</h4>
23            <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
24          </div>
25          <div className="grid gap-2">
26            {dimensions.map((dim) => (
27              <div key={dim.id} className="grid grid-cols-3 items-center gap-4">
28                <Label htmlFor={dim.id}>{dim.label}</Label>
29                <Input id={dim.id} defaultValue={dim.defaultValue} className="col-span-2" />
30              </div>
31            ))}
32          </div>
33        </div>
34      </Popover.Content>
35    </Popover>
36  );
37}

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.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousLabel

NextProgress