A share button that opens an anchored popover with a link field, a copy button that confirms and four generic channels. Escape and outside click close it.
Field notes / Oct 28
Why we moved the roadmap into the repo
Planning docs drifted out of date in a week. Pull requests did not.
npx shadcn@latest add https://hyperblur.dev/r/share-popover.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/share-popover.tsx.
import { SharePopover } from "@/components/hyperblur/share-popover"
<SharePopover url="https://example.com/post" title="My post" align="end" />| Prop | Type | Default | Description |
|---|---|---|---|
| url | string | "" | Link to share. Falls back to the current page address when empty. |
| title | string | "" | Title used for the email subject, the message text and the native share sheet. |
| channels | { id: string; label: string; icon?: string; href?: string; onSelect?: () => void }[] | [email, message, embed, native] | Channel buttons. Email and message build their links, embed copies an iframe snippet and native opens the system share sheet or copies the link. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the popover opens or closes. | |
| placement | "bottom" | "top" | "bottom" | Side of the button where the popover opens. |
| align | "start" | "end" | "start" | Which edge of the button the popover lines up with. |
| triggerLabel | string | "Share" | Text on the trigger button. |
| accent | string | "#2f7bff" | Focus ring and hover highlight color. |
| onShare | (id: string) => void | Called with the channel id, or copy for the link field, when something is shared. |