Popover

Un panel flotante con contenido interactivo, activado por click.

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
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}

Instalación

pnpm dlx nachui add popover

Anatomía

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

1<Popover>
2  <Popover.Trigger>Abrir</Popover.Trigger>
3  <Popover.Content>
4    <p>Contenido interactivo acá.</p>
5  </Popover.Content>
6</Popover>

Ejemplos

Predeterminado (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
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}

Referencia de API

Prop	Tipo	Por defecto	Descripción
`defaultOpen`	`boolean`	`false`	Estado inicial de apertura.
`open`	`boolean`	—	Estado controlado.
`onOpenChange`	`(open: boolean) => void`	—	Callback cuando cambia el estado de apertura.

Popover.Trigger

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como hijo.

Popover.Content

Prop	Tipo	Por defecto	Descripción
`side`	`"top"` \| `"bottom"` \| `"left"` \| `"right"`	`"bottom"`	Posición relativa al trigger.
`sideOffset`	`number`	`4`	Distancia desde el trigger.
`showClose`	`boolean`	`false`	Muestra un botón de cerrar.
`className`	`string`	—	Clases CSS adicionales.

Popover.Close

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como hijo.

AnteriorLabel SiguienteProgress