Orbit
Free
Items circling a center on one or more rings, staying upright and showing labels on hover.
- Design
- Code
- Audio
- Art
- Story
- Testing
- Analytics
- Launch
Customize
18s
Reverse
Pause on hover
Show rings
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/orbit.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/orbit.tsx.
Usage
import { Orbit } from "@/components/ui/orbit";
<Orbit
center={<Logo />}
rings={[
{ radius: 84, speed: 18, items: [{ icon: <PenIcon />, label: "Design" }] },
{ radius: 150, speed: 28, reverse: true, items: [{ icon: <CodeIcon />, label: "Code" }] },
]}
/>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| rings | { radius: number; speed: number; items: { icon: ReactNode; label: string }[]; reverse?: boolean }[] | — | Rings from the inside out. Speed is seconds per lap. |
| center | ReactNode | — | Content in the middle. |
| reverse | boolean | false | Turn every ring the other way. |
| pauseOnHover | boolean | true | Ease to a stop while the pointer or keyboard focus is on the orbit. |
| itemSize | number | 44 | Item size, in pixels. |
| showRings | boolean | true | Draw the ring paths. |
| label | string | "Orbit" | Accessible name of the item list. |
| className | string | — | Extra classes for the orbit. |
Dependencies: motion