Popover

Forms

About

A popover container built on React Aria Components with shadcn styling, animations, and contextual sizing for menu, select, and combobox triggers.

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

Code

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

Usage.tsx

"use client";

import * as Rac from "react-aria-components";
import { Popover } from "@/components/ui/oui-popover";

export default function Demo() {
  return (
    <div className="flex min-h-[300px] w-full items-center justify-center">
      <Rac.DialogTrigger>
        <Rac.Button className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow outline-none data-focus-visible:ring-2 data-focus-visible:ring-ring data-hovered:bg-primary/90">
          Open popover
        </Rac.Button>
        <Popover className="w-72 p-4">
          <Rac.Dialog className="outline-none">
            <div className="grid gap-2">
              <h4 className="font-medium leading-none">Dimensions</h4>
              <p className="text-sm text-muted-foreground">
                Set the dimensions for the layer.
              </p>
            </div>
          </Rac.Dialog>
        </Popover>
      </Rac.DialogTrigger>
    </div>
  );
}