A Share pill that stretches in place into a toolbar of channels and a copy link field, with the share icon turning into a close icon. Copying sweeps a green fill under the link and confirms with a check.
Q3 product report
Updated 2 hours ago, 14 pages
npx shadcn@latest add https://hyperblur.dev/r/social-share-morph.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/social-share-morph.tsx.
import { SocialShareMorph } from "@/components/hyperblur/social-share-morph"
<SocialShareMorph url="https://example.com/report" onShare={(id) => share(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| providers | Array<SocialProviderId | { id: string; label?: string; icon?: ReactNode; color?: string }> | ["x", "linkedin", "email"] | 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/r/q3-report" | Link shown in the field and copied by the Copy button. |
| label | string | "Share" | Text of the closed pill and the group label. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the pill opens or closes. Escape closes it. | |
| onShare | (provider: string) => void | Called with the channel id when a channel is clicked. | |
| onCopyLink | (url: string) => void | Called after the link is copied. |