npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@zumer/orbit

v1.4.5

Published

Orbit is a CSS framework for radial interfaces

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

tinchox5tinchox5

Keywords

CSSUIframeworkradialcircularorbitcomposerzumerlab

Readme

Orbit CSS overview

Orbit is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.

Why Orbit?

Creating radial UIs generally involves using JavaScript or other programming languages to calculate angles, radii, distances, and more. Orbit saves you time and effort by enabling you to build these UIs with just CSS.

Features

With Orbit, you can:

  • Build any kind of radial UI using predefined CSS classes that do the heavy lifting.
  • Easily compose simple or complex radial designs by combining Orbit elements.
  • Use Orbit alongside other traditional CSS frameworks.
  • Get started quickly with our detailed documentation, examples, and guides.

Documentation

Learn all about Orbit in our doc site!

What is radial UI?

Radial UI refers to a design paradigm where elements are organized in a circular or radial pattern, diverging from traditional grid-based or linear layouts. This design approach is particularly effective for applications that involve:

  • Circular data visualization: progress bars, pie charts, multi-level pies, gauges, knobs
  • Navigation menus and controls: radial or pie menus, circular scrolling
  • Dashboards: smart-home interfaces, car dashboards, infotainment systems
  • Calendars: circular layouts for scheduling and event tracking
  • Creative art and structures: mandalas, sci-fi-inspired art, chemical structures
  • Interactive interfaces: watch faces, dynamic controls for games or tools

Characteristics:

  • Circular layout: elements are arranged in a circular or curved pattern.
  • Center-focused: the center often serves as a focal point.
  • Symmetry: radial UIs frequently exhibit symmetry, fostering a sense of balance.
  • Angular relationships: elements are positioned at specific angles relative to one another.

Benefits:

  • Aesthetics: radial designs are visually striking and engaging.
  • Intuitive navigation: circular layouts simplify navigation and reduce cognitive load.
  • Space efficiency: radial UIs make efficient use of available screen, ideal for both compact and expansive interfaces.

Installation

Orbit comes with just two files: orbit.css (or orbit.min.css) and orbit.js (or orbit.min.js).

Obtaining the Orbit files

You can get Orbit files in three ways:

1. Download the files

2. Use a CDN

3. Install via npm or yarn

npm install @zumer/orbit

or

yarn add @zumer/orbit

Adding Orbit to your project

Include the files in your project as follows:

<head>
  <link rel="stylesheet" href="path/to/orbit.css">
  <script src="path/to/orbit.js"></script>
</head>

Or via CDN:

<head>
  <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>
</head>

🏁 Quick start

<div class="bigbang">
  <div class="gravity-spot">
    <div class="orbit-2 range-180 from-180">
      <o-arc shape="circle" class="shrink-50"></o-arc>
    </div>
    <div class="orbit-3 range-270 ">
      <o-arc shape="circle" class="shrink-50"></o-arc>
    </div>
  </div>
</div>

Examples

  • A dashboard
    demo1

  • A watch
    demo3

Explore more examples in our doc site.

Stay in Orbit

There are many ways to contribute to Orbit development:

  • Contribution guidelines: This guide outlines how you can contribute to Orbit, help us test and improve it, and share your experiences with the community.
  • GitHub discussions: Engage with other contributors, ask questions, and share your experiences.
  • Telegram group: Join our Telegram group for real-time discussions and updates.

Special thanks to our contributors

License

MIT