Tech Orbit
Your tech stack on orbiting rings. Hover or focus a logo to pause its ring and see its name. Pure CSS, server-rendered.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/tech-orbitOther Examples
Three Rings
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rings* | OrbitRing[] | - | Innermost ring first. |
center | React.ReactNode | - | Content in the middle, e.g. your logo. |
size | number | 420 | Width of the orbit in px. It shrinks to fit narrower containers. |
itemSize | number | 44 | Size of each logo bubble in px. |
label | string | "Tech stack" | Accessible name of the list. |
className | string | - | Extra classes for the root element. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes, passed to the root element. |
