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

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

<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

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.

Resources

• orbit-kit — ready-made radial components built on Orbit
• Full documentation — elements, tools, advanced examples
• Contributing
• GitHub Discussions
• Telegram

License

MIT