Popover

A small overlay positioned relative to a trigger element

A popover component built with Ark UI, rendered in a portal and positioned relative to a trigger. Use it for contextual info, menus, or small forms. Supports a convenience API (trigger + children) or the compound API for full control.

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

export default function Example() {
  return (
    <Popover trigger={<Button>Open popover</Button>}>
      <div className="text-sm">
        This is some content inside the popover.
      </div>
    </Popover>
  );
}

View Code

Installation

bash

liminal add popover

Usage

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

export default function Example() {
  return (
    <Popover trigger={<Button>Open popover</Button>}>
      <div className="text-sm">
        This is some content inside the popover.
      </div>
    </Popover>
  );
}

View Code

Examples

Convenience API

Pass trigger (the element that opens the popover) and children (the popover content).

<Popover trigger={<Button>Open popover</Button>}>
  <div className="text-sm">Content inside the popover.</div>
</Popover>

View Code

Compound API

Use PopoverRoot, PopoverTrigger, PopoverContent, and optionally PopoverTitle, PopoverDescription, PopoverCloseTrigger for custom layout.

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>Details</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverTitle>Popover title</PopoverTitle>
        <PopoverDescription>
          Additional information about this action.
        </PopoverDescription>
        <PopoverCloseTrigger className="mt-2 text-sm underline">
          Close
        </PopoverCloseTrigger>
      </PopoverContent>
    </PopoverRoot>
  );
}

View Code

API

Prop	Type	Default	Description
trigger	React.ReactNode	-	Element that opens the popover (convenience API).
open	boolean	uncontrolled	Controlled open state (PopoverRoot).
onOpenChange	(details) => void	-	Callback when open state changes (PopoverRoot).