Orbital diagram with two dashed rings, a chambray planet and two smaller moons in cocoa and celadon, painted with Orbital v4 orbs. Absolutely centred and scaled down on small screens.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/orbit-systemnpx shadcn add @01orbital/orbit-systemyarn shadcn add @01orbital/orbit-systembunx --bun shadcn add @01orbital/orbit-systemPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/graphics/orbit-system.tsx, as source you own and edit.
import { OrbitSystem } from "@/components/graphics/orbit-system"
export default function Example() {
return <OrbitSystem />
}It accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
Growth Curve
Decorative chart where an orb climbs an accelerating curve drawn in currentColor, leaving a bright trail over a faint remainder. A CSS-only loop with adjustable duration; reduced motion shows it finished.
Road Signs
North American road sign set: highway guide, exit, next services, mile marker, speed limit and warning diamond on green, blue and yellow faces. Uses the Overpass sign font and Phosphor service icons.