An icon button that opens a dropdown with Copy link, Other apps, X, ChatGPT, Claude, and Grok. Other apps opens the browser’s native share sheet when supported. NFC sharing appears on browsers that support Web NFC. Markdown and AI actions expect a working llms.txt endpoint for the page. NFC requires a compatible device and a writable tag.
Installation
Add the share-menu component from Hangry UI to this project.
Use the project's package manager to run:shadcn@latest add https://ui.razeev.com/r/share-menu.json
Integrate the component with the existing layout and styling.Keep its interactions and reduced-motion support intact.How to use
import { ShareMenu } from "@/components/hangry-ui/components/share-menu";import { Toaster } from "@/components/hangry-ui/components/toast";
<> <ShareMenu title="Share Menu — Hangry UI" url="https://ui.razeev.com/components/share-menu" /> <Toaster /></>;Pass an absolute public URL so the social links and native share sheet can open it. Mount Toaster once near your app root.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Current page | Title for native sharing; defaults to document.title. |
url | string | Current page | Absolute URL to share or copy. pageUrl is also accepted. |
text | string | Empty | Text passed to the native share sheet. pageContent is also accepted. |
className | string | Empty | Additional classes on the action group. |
Dependencies
- lucide-react
- Motion
- @ridemountainpig/svgl-react