A round share trigger that fans a vertical rail of icon buttons out with a staggered spring. Each button shows a tooltip on hover or focus.
changelog / v2.4.0
Faster builds, calmer logs
npx shadcn@latest add https://hyperblur.dev/r/share-floating-rail.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/share-floating-rail.tsx.
import { ShareFloatingRail } from "@/components/hyperblur/share-floating-rail"
<ShareFloatingRail url="https://example.com/post" />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: string; href?: string; onSelect?: () => void }[] | [copy, email, message, native] | Rail buttons, nearest to the trigger first. Copy copies the link, email and message build their links and native opens the system share sheet or copies the link. |
| 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. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the rail opens or closes. | |
| direction | "up" | "down" | "up" | Direction the rail grows from the trigger. |
| tooltipSide | "left" | "right" | "left" | Side of each button where its tooltip appears. The rail curves slightly the other way. |
| size | number | 44 | Trigger diameter in pixels. Rail buttons are slightly smaller. |
| accent | string | "#2f7bff" | Focus ring and hover highlight color. |
| label | string | "Share" | Accessible name of the trigger and the rail. |
| onShare | (id: string) => void | Called with the item id when a button is activated. |