orbit-kit — component gallery

🛰️ Built on Orbit — the CSS framework for radial UIs. Orbit docs ↗ Orbit on GitHub ↗

Every widget below is a single declarative tag that expands into the canonical Orbit structure in the light DOM. Open devtools "Inspect" to see what each one renders. Requires the Orbit core (CSS + JS) loaded on the page.

<o-gauge> — single value

value="72" unit="%"

range="360" + glow

<o-donut> — data-driven chart

3 segments, normalized to 100%

total="100" → partial ring

<o-rings> — activity rings

Move / Exercise / Stand

<o-knob> — interactive control

drag ↕ / wheel / arrow keys — 65%

<o-menu> — radial menu (single- & multi-level)

single level — click → select

multi-level — drill into a branch, center = back (Esc)

concentric (editor) — parent stays, children fan out

— pick a menu item —

<o-compass> — heading

animated heading

<o-instrument> — cockpit / dashboard gauges

Preset cockpit instruments — automotive, aviation, computer — with major/minor ticks, color zones, redline, numeric scale and a digital readout.

preset="tachometer" (animated)

preset="speedometer" (animated)

preset="fuel" — 90° arc, E/F

preset="temp"

preset="airspeed" — aviation, color arcs

preset="boost" — turbo, bipolar

preset="cpu" case="square" (animated)

preset="vu" — audio meter

<o-clock> — analog clock / watch face (flagship)

live seconds — ticking, round

preset="smartwatch" — rounded case, digital + date

preset="chrono" — tri-compax sub-dials (live)

case="rectangle" dial="oval" — tonneau (vertical)

numerals="roman" case="square" — luxury, themed

preset="minimal" — no numerals, sweep

dial="rings" — iOS activity-ring clock

<o-radar> — scope

orbit grid + cross-hairs + sweep-width="140" gradient trail + glowing blips