Traken UI

Magical Share Menu

The `Magical Share Menu` component creates an animated share button that expands to reveal social media links in a circular pattern.

Magical Share Menu

installation

Install Dependencies

To use the Astronaut Social Card component, you need to install the following dependencies:

npm install motion react-icons

Add util file

Create a file named utils.ts in the same directory as the component and add the following code:

lib/utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

use this component in your app

<MagicalShareMenu
  socialLinks={[
    { icon: <Facebook />, color: "#1877f2", url: "#" },
    { icon: <Github />, color: "#25d366", url: "#" },
    { icon: <Twitter />, color: "#000000", url: "#" },
    { icon: <Instagram />, color: "#ff4500", url: "#" },
    { icon: <Magnet />, color: "#0a66c2", url: "#" },
  ]}
/>

Props

PropTypeDescription
socialLinksArray<{ icon: React.ReactNode; color: string; url: string; }>Array of social media links with icons, colors, and URLs.
iconReact.ReactNodeReact component to display as the social media icon.
colorstringHEX color code for the icon and hover effect.
urlstringURL to navigate to when the icon is clicked.

Loaders

A set of animated preloaders.

Toggle Switch

The `Toggle Switch` component creates a fluid animated toggle with spring physics and smooth color transitions using Framer Motion.

On this page