A row of share pills with monochrome glyphs that pick up each platform's accent on hover, a copy-link pill and a native share button.
npx shadcn@latest add https://hyperblur.dev/r/share-row.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/share-row.tsx.
import { ShareRow } from "@/components/hyperblur/share-row"
<ShareRow title="Notes from the greenhouse" url={postUrl} links={[{ id: "x" }, { id: "email" }, { id: "copy" }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| links | { id: "x" | "linkedin" | "facebook" | "whatsapp" | "email" | "copy" | "link"; href?: string; label?: string }[] | [x, linkedin, email, copy] | Pills to render. Share URLs are built from title, url and text unless href is given. The copy pill briefly reads Copied. |
| title | string | "" | Page title used for the post text, email subject and native share sheet. |
| url | string | "" | URL to share. Falls back to the current page address when empty. |
| text | string | "" | Extra message text for the post, email body and native share sheet. |
| iconOnly | boolean | false | Hide the pill labels and keep only the glyphs. Labels stay available to screen readers and as tooltips. |