Social Orbit

An avatar with social links circling it on two counter-rotating rings, upright icons, brand-colored hovers and tooltip labels; pauses on hover.

Ana Reyes

Product designer · Lisbon

Open

avatar

innerRadius95

outerRadius160

speed1

pauseOnHover

showRings

accent

Installation

npx shadcn@latest add @glint-ui/social-orbit

First 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/social-orbit.json

Usage

import { SocialOrbit } from "@/components/ui/social-orbit";

<SocialOrbit
  avatar="/me.jpg"
  name="Ana Reyes"
  items={[
    { label: "GitHub", href: "https://github.com/ana", icon: <GitHubIcon />, color: "#6e40c9" },
    { label: "X", href: "https://x.com/ana", icon: <XIcon />, color: "#0f1419" },
  ]}
/>

Props

Prop	Type	Default	Description
avatar	string	—	Avatar image URL.
name	string	—	Person's name, used as the avatar alt text.
items	ReactNode	—	Array of { label, href, icon, color? }. First half orbits the inner ring.
innerRadius	number	95	Inner ring radius in px.
outerRadius	number	160	Outer ring radius in px.
speed	number	1	Orbit speed multiplier; 0 stops it.
pauseOnHover	boolean	true	Pause while hovered or focused.
showRings	boolean	true	Draw the dashed orbit paths.
accent	string	"#a3e635"	Avatar halo and glow color.
className	string	—	Extra classes for the root element.