Popover (Radix UI)

Component 4

About

An animated popover built on Radix UI primitives with side-aware panel motion, squircle corners, and size-aware content transitions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Popover (Radix UI) to your project and fits it to your theme.

Code

How Popover (Radix UI) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/r-popover";

export default function PopoverDemo() {
  return (
    <div className="flex min-h-[200px] items-center justify-center">
      <Popover>
        <PopoverTrigger className="border border-[color:var(--po-border)] px-4 text-sm font-medium">
          Open popover
        </PopoverTrigger>
        <PopoverContent>
          <div className="space-y-2">
            <p className="text-sm font-medium">Dimensions</p>
            <p className="text-sm opacity-70">
              Set the dimensions for the layer. Adjust width and height to fit
              your canvas.
            </p>
          </div>
        </PopoverContent>
      </Popover>
    </div>
  );
}