Matte Popover

Component

About

A dark, pinnable info popover that opens from a trigger button, auto-positions itself above or below the trigger, and closes on outside click, Escape, or blur. Ported to React from the original HTML/CSS/JS component by SLtowl (sl-ui-library), MIT licensed.

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

Code

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

Usage.tsx

import MattePopoverOverlay from "@/components/ui/matte-popover-overlay";

export default function MattePopoverOverlayDemo() {
  return (
    <div
      className="flex min-h-[560px] w-full items-center justify-center"
      style={{
        background:
          "radial-gradient(ellipse at 25% 0%, #f7f8f9, transparent 95%), linear-gradient(145deg, #eef0f2, #e4e7eb)",
      }}
    >
      <MattePopoverOverlay />
    </div>
  );
}