The OrbitingElements component places children evenly around a circle and rotates them around a centre point, keeping each one upright.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/orbiting-elements.jsonEverything Orbiting Elements accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| children (required) | React.ReactNode | No default | Elements to place around the orbit |
| radius | number | 100 | Orbit radius in pixels |
| duration | number | 20 | Seconds for one full revolution |
| reverse | boolean | false | Orbit anticlockwise |
| showPath | boolean | true | Draw the dashed orbit path |
| startAngle | number | 0 | Degrees to offset the first item by |
| className | string | '' | Additional CSS classes for the container |
Required.