Popover

Component

About

A floating panel anchored to a trigger element for content too big for a tooltip and too small for a dialog, with automatic flip and viewport clamping.

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 Popover from "@/components/ui/popover";
import { useState } from "react";

export default function PopoverDemo() {
  const [copied, setCopied] = useState(false);

  return (
    <div
      style={{
        display: "flex",
        minHeight: 320,
        width: "100%",
        alignItems: "center",
        justifyContent: "center",
        padding: 40,
        background: "var(--background)",
        color: "var(--foreground)",
      }}
    >
      <Popover
        align="start"
        ariaLabel="Share link"
        trigger={
          <button
            type="button"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.5rem",
              padding: "0.625rem 1rem",
              borderRadius: 10,
              border: "1px solid rgba(0,0,0,0.1)",
              background: "#0071e3",
              color: "#ffffff",
              fontSize: "0.9375rem",
              fontWeight: 500,
              cursor: "pointer",
            }}
          >
            Share
          </button>
        }
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            gap: "0.75rem",
            minWidth: 220,
          }}
        >
          <label
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "0.375rem",
              fontSize: "0.8125rem",
              color: "var(--mors-color-text-secondary)",
            }}
          >
            Anyone with the link
            <input
              readOnly
              value="https://example.com/p/8f2c"
              style={{
                padding: "0.5rem 0.625rem",
                borderRadius: 8,
                border: "1px solid rgba(0,0,0,0.12)",
                fontSize: "0.8125rem",
              }}
            />
          </label>
          <button
            type="button"
            onClick={() => {
              setCopied(true);
              setTimeout(() => setCopied(false), 1500);
            }}
            style={{
              padding: "0.5rem 0.75rem",
              borderRadius: 8,
              border: "none",
              background: "#0071e3",
              color: "#fff",
              fontSize: "0.8125rem",
              fontWeight: 500,
              cursor: "pointer",
            }}
          >
            {copied ? "Copied!" : "Copy link"}
          </button>
        </div>
      </Popover>
    </div>
  );
}