Share Menu
A compact share popover with X, LinkedIn, and copy-link actions. Accepts a title and URL and handles encoding automatically.
Features
- Shares to X and LinkedIn with correctly encoded title and URL.
- Copy link with a 2-second copied state and emerald icon feedback.
- Built on Popover — no extra dependencies beyond popover and separator.
- Adding new share targets requires one entry in SHARE_TARGETS — no JSX changes.
Installation
1
Run the shadcn CLI command
npx shadcn@latest add @lalit/share-menunpx shadcn@latest add @lalit/share-menupnpm dlx shadcn@latest add @lalit/share-menupnpm dlx shadcn@latest add @lalit/share-menunpx shadcn@latest add @lalit/share-menunpx shadcn@latest add @lalit/share-menubunx shadcn@latest add @lalit/share-menubunx shadcn@latest add @lalit/share-menuThis installs the component directly. Update import paths to match your setup.
Usage
import { ShareMenu } from '@/components/ui/share-menu'
export function Example() {
return (
<ShareMenu
title="Ship your own component registry with shadcn"
url="https://lalitkakkar.vercel.app/blog/shadcn-custom-registry"
/>
)
}
import { ShareMenu } from '@/components/ui/share-menu'
export function Example() {
return (
<ShareMenu
title="Ship your own component registry with shadcn"
url="https://lalitkakkar.vercel.app/blog/shadcn-custom-registry"
/>
)
}
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Page title used as the share text on X and email subject. |
url* | string | — | URL to share. Encoded automatically for each target. |
className | string | — | Additional classes applied to the trigger button. |