Comment Pin
Figma-style annotation pins that spring in over any surface and expand into a threaded comment popover with a reply field.
Click a pin to open its thread.
AR
Ana Reyes2m
Can we tighten this spacing?
MB
Marco Bell1m
Agreed — bumping to 8px.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/comment-pin.json"Position a pin with x/y percentages inside a relative container. It
springs in, and clicking morphs out a thread popover with the comment list and
an optional reply field. Resolved pins shrink and desaturate.
Usage
tsx
import { CommentPin } from "@/components/godui/comment-pin";tsx
<div className="relative">
<CommentPin x={25} y={40} comments={comments} onReply={reply} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
x / y | number | — | Position as a percentage of container. |
comments | Comment[] | [] | Thread comments. |
label | ReactNode | — | Pin face (defaults to author initials). |
resolved | boolean | false | Shrink + desaturate the pin. |
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Fired when the thread toggles. |
onReply | (text: string) => void | — | Enables and handles the reply field. |