components

Share Menu

An animated share menu for React and Next.js with social sharing, copy link, native Web Share API support, and customizable animations.

Live Preview
Loading…

Installation

$ pnpm dlx shadcn@latest add https://themainakb.com/r/share-menu.json

Features

  • Multiple Share Options — Create share links for social platforms, copy links, or use the native Web Share API.
  • Built-in Copy Feedback — Copy URLs with animated success states and toast notifications.
  • Customizable Animations — Choose from multiple animation presets or provide your own Motion variants.
  • Composable API — Build fully custom share menus using flexible compound components.
  • Accessible & Responsive — Built with shadcn/ui and Radix primitives for keyboard accessibility and consistent behavior.

Usage

import { ShareMenu } from "@/components/share-menu";
<ShareMenu title="Share Menu" url="/components/share-menu">
  <ShareMenuTrigger className="bg-hover-fill-icon hover:bg-hover-fill-icon flex h-7 w-7 items-center justify-center rounded-md border-0">
    <Share size={16} />
  </ShareMenuTrigger>
  <ShareMenuContent align="end">
    <ShareMenuCopy />
    <ShareMenuItem
      icon={<Icon name="twitter" />}
      href={`https://x.com/intent/tweet?url=${encodeURIComponent(https://themainakb.com/components/share-menu)}`}
    >
      Share on Twitter
    </ShareMenuItem>
    <ShareMenuItem
      icon={<Icon name="linkedin" />}
      href={`https://www.linkedin.com/sharing/share-offsite?url=${encodeURIComponent(https://themainakb.com/components/share-menu)}`}
    >
      Share on Linkedin
    </ShareMenuItem>
    <ShareMenuNative icon={<Share />}>Share To</ShareMenuNative>
  </ShareMenuContent>
</ShareMenu>

Compatibility Note

Some components are currently built using shadcn/ui (Radix) primitives and may not work with shadcn/ui (Base UI) yet. I'm actively working on making every component compatible with both Radix and Base UI variants of shadcn/ui. Compatibility will continue to improve with future updates.