A deployment chip that opens a detailed popover with status, commit, a proportional build timeline and quick actions. It flips above or below and nudges sideways to stay on screen while the arrow keeps pointing at the trigger.
npx shadcn@latest add https://hyperblur.dev/r/popover-rich.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/popover-rich.tsx.
import { PopoverRich } from "@/components/hyperblur/popover-rich"
<PopoverRich onAction={(a) => console.log(a)} />| Prop | Type | Default | Description |
|---|---|---|---|
| deployment | PopoverRichDeployment | Deployment #482 on acme-store.app | { name, status: "ready" | "building" | "error", environment, url, branch, commit, message, author, age, stages: { label, seconds }[] }. |
| placement | "auto" | "top" | "bottom" | "auto" | Side of the trigger. Auto picks the side with room. |
| open | boolean | Controlled open state. | |
| defaultOpen | boolean | false (true when embedded) | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called on trigger click, outside click and Escape. | |
| onAction | (action: "visit" | "logs" | "redeploy" | "copy") => void | Called by the four action buttons. Copy URL also writes to the clipboard. | |
| embedded | boolean | false | Show the popover in normal flow under the trigger, for previews. |
| accent | string | "#2f7bff" | Brand mark, timeline and focus ring color. |
| className | string | Extra classes on the root. | |
| style | React.CSSProperties | Inline styles on the root. |