Browse components
Radial Socials
A share button that fans social links out along a radial arc with a staggered spring, a drawn guide arc and brand-colored hovers.
Installation
npx shadcn@latest add @glint-ui/radial-socialsFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/radial-socials.json
Usage
import { RadialSocials } from "@/components/ui/radial-socials";
<RadialSocials
items={[
{ label: "X", href: "https://x.com", icon: <XIcon />, color: "#000" },
{ label: "GitHub", href: "https://github.com", icon: <GitHubIcon />, color: "#24292f" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { label, href, icon, color? }. |
| radius | number | 120 | Distance from the button to each icon, in px. |
| angle | number | -90 | Direction the arc faces in degrees (-90 is up). |
| spread | number | 180 | Arc width in degrees; 360 is a full ring. |
| stagger | number | 0.05 | Seconds between icons springing out. |
| defaultOpen | boolean | — | Start opened (default false). |
| guide | boolean | true | Faint dashed guide arc behind the icons. |
| label | string | "Share" | Accessible label of the center button. |
| className | string | — | Extra classes for the root element. |