Popover

Component 8

About

A neobrutalist popover — a floating panel anchored to a trigger for titles, descriptions, and inline forms, built on Base UI with thick borders and hard shadows.

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 { Button } from "@/components/ui/popover-utils/Button";

export default function PopoverStyleDefault() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button>Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content className="w-80 font-sans">
        <Popover.Header>
          <Popover.Title>Popover Title</Popover.Title>
          <Popover.Description>
            This is a popover description.
          </Popover.Description>
        </Popover.Header>
      </Popover.Content>
    </Popover>
  );
}