Press and hold the share button, drag toward a channel on the ring that opens around it and release to share. A tap keeps the ring open for clicking, and the keyboard opens it with Enter and moves with the arrow keys.
Realtime cursors are live
Changelog, Nov 6
npx shadcn@latest add https://hyperblur.dev/r/social-share-dial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-share-dial.tsx.
import { SocialShareDial } from "@/components/hyperblur/social-share-dial"
<SocialShareDial url="https://example.com/post" onShare={(id) => track("share", id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| providers | Array<SocialProviderId | { id: string; label?: string; icon?: ReactNode; color?: string }> | ["x", "linkedin", "facebook", "email", "link", "slack"] | Channels in display order. The id link copies the url to the clipboard. Pass an object for a custom label, icon or color. |
| url | string | "https://northwind.app/changelog/realtime-cursors" | Link copied by the link channel. |
| radius | number | 56 | Ring radius in pixels. The component box grows with it. |
| hint | string | "Hold and drag to share" | Caption shown under the button while the ring is closed. |
| onShare | (provider: string) => void | Called with the channel id when one is picked. |