Radial Socials

Component

About

An animated compound component that arranges social/brand icons in expanding, rotating circles around a center point.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Socials to your project and fits it to your theme.

Code

How Radial Socials is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  RadialSocials,
  RadialSocialsContent,
  RadialCircular,
  RadialIcon,
} from "@/components/ui/radial-socials";
import { Zap, Rocket, Flame, Wind } from "lucide-react";

export default function RadialSocialsDemo() {
  return (
    <div className="w-full h-screen flex items-center justify-center bg-background">
      <RadialSocials
        animationDelay={200}
        expandDuration={600}
        className="w-[300px] h-[300px]"
      >
        <RadialSocialsContent>
          <RadialCircular radius={70} duration={20} startAngle={39}>
            <RadialIcon icon={<Zap className="w-5 h-5" />} />
            <RadialIcon icon={<Rocket className="w-5 h-5" />} />
            <RadialIcon icon={<Flame className="w-5 h-5" />} />
            <RadialIcon icon={<Wind className="w-5 h-5" />} />
          </RadialCircular>
        </RadialSocialsContent>
      </RadialSocials>
    </div>
  );
}