Radial Socials

radial social icons arranged in circles, with smooth expansion and rotation

ScrollX UI

skip the drama, your UI comes pre-cooked, cooler than your deadlines and faster than your coffee break

Installation

npx shadcn@latest add https://scrollxui.dev/registry/radial-socials.json

Usage

import {
  RadialSocials,
  RadialSocialsContent,
  RadialCircular,
  RadialIcon,
} from "@/components/ui/radial-socials";

<RadialSocials animationDelay={200} expandDuration={600} className="w-[200px] h-[120px]">
  <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>

API Reference

Radial Socials

radial social icons arranged in circles, with smooth expansion and rotation

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Nested RadialSocialsContent, RadialCircular, or RadialIcon components.
`className`	string	`-`	Additional classes for the RadialSocials container.
`animationDelay`	number	`150`	Delay (ms) between the animation of each icon.
`expandDuration`	number	`800`	Duration (ms) for icons to expand from the center.
`containerClassName`	string	`-`	Additional classes for the outermost content wrapper.
`radius`	number	`required`	Radius of the circular path for icons.
`duration`	number	`20`	Rotation duration of the circle in seconds.
`circleLineClassName`	string	`-`	Custom class names for the circular border line.
`startAngle`	number	`0`	Starting angle (degrees) for placing the first icon.
`icon`	ReactNode	`required`	Icon element to display in the radial circle.
`angle`	number	`auto`	Angle (degrees) to place this icon; overrides automatic spacing.