Popover

Pequeño overlay posicionado respecto a un elemento disparador

Componente popover construido con Ark UI, renderizado en un portal y posicionado respecto a un disparador. Úsalo para información contextual, menús o formularios pequeños. Admite API conveniente (trigger + children) o API compuesta para control total.

import { Popover } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Popover trigger={<Button>Abrir popover</Button>}>
      <div className="text-sm">
        Este es el contenido dentro del popover.
      </div>
    </Popover>
  );
}

View Code

Instalación

bash

liminal add popover

Uso

import { Popover } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <Popover trigger={<Button>Abrir popover</Button>}>
      <div className="text-sm">
        Este es el contenido dentro del popover.
      </div>
    </Popover>
  );
}

View Code

Ejemplos

API conveniente

Pasa trigger (el elemento que abre el popover) y children (el contenido del popover).

<Popover trigger={<Button>Abrir popover</Button>}>
  <div className="text-sm">Contenido dentro del popover.</div>
</Popover>

View Code

API compuesta

Usa PopoverRoot, PopoverTrigger, PopoverContent y opcionalmente PopoverTitle, PopoverDescription, PopoverCloseTrigger para un layout personalizado.

import {
  PopoverRoot,
  PopoverTrigger,
  PopoverContent,
  PopoverTitle,
  PopoverDescription,
  PopoverCloseTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <PopoverRoot>
      <PopoverTrigger asChild>
        <Button>Detalles</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Título del popover</PopoverTitle>
        <PopoverDescription>
          Información adicional sobre esta acción.
        </PopoverDescription>
        <PopoverCloseTrigger className="mt-2 text-sm underline">
          Cerrar
        </PopoverCloseTrigger>
      </PopoverContent>
    </PopoverRoot>
  );
}

View Code

API

Prop	Type	Default	Description
trigger	React.ReactNode	-	Elemento que abre el popover (API conveniente).
open	boolean	uncontrolled	Estado abierto controlado (PopoverRoot).
onOpenChange	(details) => void	-	Callback cuando cambia el estado abierto (PopoverRoot).