Orbit CSS Composer

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).

<a href="https://zumerlab.github.io/orbit-docs" target="_blank">🚀 Live showcase & docs</a> <a href="https://www.npmjs.com/package/@zumer/orbit"><img src="https://img.shields.io/npm/v/@zumer/orbit" alt="npm"></a> <a href="https://github.com/zumerlab/orbit/stargazers"><img src="https://img.shields.io/github/stars/zumerlab/orbit" alt="Stars"></a>

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.

Want ready-made components? orbit-kit wraps the common Orbit patterns into one-line custom elements — gauges, charts, activity rings, knobs, pie menus, cockpit instruments, analog clocks, compasses and radars.

Installation

CDN (fastest):

html
<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:

bash
npm install @zumer/orbit

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

Quick start

Minimal gauge in 10 lines:

html
<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

html
<!-- 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.

html
<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

Using Orbit with AI / LLMs

Orbit's radial model is unlike the box-flow layouts most models were trained on,
so an assistant generating Orbit markup from scratch will struggle. Give it the
reference first — these files are written for that purpose:

llms.txt — concise overview, structure rules, quick recipes.
llms-full.txt — complete reference: every class, custom property, web component, and copy-paste pattern.

Paste the relevant one into your prompt (or your tool's context/rules) before
asking the model to build a radial UI.