Orbit CSS Composer

March 9, 2026 · View on GitHub

Orbit is a CSS framework for building radial UIs — gauges, donuts, knobs, pie menus, dashboards — with CSS only. No layout JavaScript. Works with plain HTML and any framework (React, Vue, Svelte).

🚀 Live showcase & docs

Why Orbit?

Radial UIs usually need JavaScript to compute angles, radii, and positions. Orbit handles all of that with CSS classes and a couple of Web Components. Drop in two files and start building.

Installation

CDN (fastest):

<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>

npm:

npm install @zumer/orbit

import '@zumer/orbit/style'
import '@zumer/orbit'

Quick start

Minimal gauge in 10 lines:

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-4">
      <o-progress value="72"></o-progress>
    </div>
  </div>
</div>

Structure: bigbang (container) → gravity-spot (center) → orbit-N (ring level) → o-progress or o-arc (the visual element).

Core elements

Element	Role
`.bigbang`	Root container, sets viewport
`.gravity-spot`	Center of the radial layout; holds rings
`.orbit-1` … `.orbit-7`	Rings at different radii (1 = innermost)
`.satellite`	Item placed on a ring (dot, label, icon)
`<o-arc>`	Arc segment (donut slice, gauge needle, menu sector); `value` 0–100, `shape` e.g. `arrow`, `circle-a`
`<o-progress>`	Simple progress ring
`.vector`	Tick/marker on a ring
`.side`	Stretch content along arc
`.capsule`	Wrapper for content inside satellite; required when satellite holds more than plain text

Structure rules (avoid visual warnings):

.bigbang → direct children: .gravity-spot only
.gravity-spot → direct children: .orbit, .orbit-N, or .gravity-spot only
.satellite → direct children: .capsule or .gravity-spot (for nesting) only
.orbit / .orbit-N → do not nest other orbits; orbits live inside gravity-spot
o-arc and o-progress → only work in circular orbits; they are hidden in elliptical shapes

Useful classes: range-180, range-270, range-360 (arc span); from-180 (start angle); fit-range (distribute items); shrink-50, gap-4 (spacing); at-center (place satellite in middle).

Themes

Orbit includes built-in themes. Add the theme class to .bigbang:

Theme	Class	Description
Default	(none)	Transparent borders, gray fills, satellites use `currentColor`
Cyan	`theme-cyan`	Cyan satellite borders, cyan vectors/sides, light cyan fills for `o-arc` and `o-progress`
Developer	`dev-orbit`	Dashed red borders on orbits and satellites to visualize structure while debugging

<!-- Default (no class) -->
<div class="bigbang">...</div>

<!-- Cyan theme -->
<div class="bigbang theme-cyan">...</div>

<!-- Developer mode for layout debugging -->
<div class="bigbang dev-orbit">...</div>

You can combine themes, e.g. class="bigbang theme-cyan dev-orbit".

Visual aids & development

Orbit provides CSS visual warnings to catch invalid structure. When rules are broken (e.g. wrong children in gravity-spot or satellite), Orbit shows a red dotted border, grays out content, and displays a ⚠️ icon.

Add class="dev-orbit" to your root container to enable developer mode: dashed red borders on gravity-spot, orbit, and satellite to visualize the layout structure. Useful for debugging.

<div class="bigbang dev-orbit">
  <div class="gravity-spot">
    ...
  </div>
</div>

Orbit also checks browser support for :has() and trigonometric CSS functions (cos, sin); unsupported browsers show an upgrade message. See CSS visual aids in the full docs.

Examples

Browse examples on the Orbit docs site:

Example	Link
Circular timer	circular_time
Progress bars	progress
Charts (donut, pie, sunburst)	charts
Gauges (180°, 240°, fuel)	gauges
Knobs	knobs
Pie menus	piemenu
Watch faces	watches
Chemical structures	chemical_structures
Calendars & time planners	calendar
Mandalas	mandalas
Dashboard	dashboard
Abstract orbital map	abstract_map

Use cases

Dashboards: gauges, status rings, KPIs
Automotive / HUD: speedometers, tachometers, battery, temp
IoT / Smart home: thermostats, energy rings, scenes
Ops / monitoring: status rings, uptime gauges
Fitness / health: activity rings (Move, Exercise, Stand)
Controls: knobs, radial menus, compass

Resources

Full documentation — elements, tools, advanced examples
Contributing
GitHub Discussions
Telegram

License

MIT