Orbiting circlesPro
Icons orbiting a center on rings, staying upright as they travel.
When to use
- Showing integrations, a platform's ecosystem or connected tools on a landing page.
When not to use
- Data people need to read: the icons move.
Installation
Usage
Import it from @/components/ui/orbiting-circles after installing.
example.tsx
import { GitBranch, Mail, Zap } from "lucide-react";
import { OrbitingCircles } from "@/components/ui/orbiting-circles";
<OrbitingCircles
label="Integrations: Git and email"
center={<Zap />}
rings={[{ radius: 80, items: [<GitBranch key="g" />, <Mail key="m" />] }]}
/>API reference
OrbitingCircles
Concentric rings of items rotating around a center; each item counter-rotates to stay upright.
| Prop | Type | Default | Description |
|---|---|---|---|
| rings | OrbitRing[] | – | { radius, items, duration?, reverse?, itemSize? }. |
| center | ReactNode | – | Middle content, e.g. your logo. |
| paths | boolean | true | Dashed orbit lines. |
| label | string | – | What the picture shows; read as one image. |
Accessibility
- Exposed as one image with your label; the moving parts are hidden.
- Static under reduced motion.
Motion
- Each ring spins linearly at its own speed; reverse rings counter-rotate.
Responsive behavior
- Sized from the largest ring; never wider than its container.
Performance
- One rotation per ring and per item, all transforms.
Notes for AI
- List the integrations in label so screen-reader users get the same information.
This page as Markdown, for assistants and coding agents:
/components/orbiting-circles/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt