Installation & quick start

Load both the stylesheet and the JavaScript runtime. CSS controls geometry and presentation; the runtime keeps ring indices, spacing and SVG paths in sync as elements and containers change.

Use the same build as this site

The examples use the current Orbit source build. Download the matching files together:

• orbit.min.css
• orbit.min.js
• orbit.mjs — ES module
• Build version, source commit and file checksums

<link rel="stylesheet" href="./orbit.min.css">
<script defer src="./orbit.min.js"></script>

The classic script registers <o-arc> and <o-progress> and exposes window.Orbit. With the ES module, load it from your browser entrypoint:

import { Orbit } from './orbit.mjs';

// After the container mounts; call the returned function when it unmounts.
const stopResizing = Orbit.resize('#instrument-panel');

The current module is safe to import during server rendering. Its JavaScript must also run in the browser to activate the rendered markup.

Install the published package

npm

npm i @zumer/orbit

pnpm

pnpm add @zumer/orbit

yarn

yarn add @zumer/orbit

Load the stylesheet and import the package from your client entrypoint:

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

Site build and npm release

The source build used here includes the updated layout runtime, ES module exports and observer cleanup. The published npm release currently has the same 1.4.12 version number but predates those changes. Use the matching downloads above to reproduce this site’s behavior; the manifest identifies the exact source commit. Publishing a new package release is a separate step.

You can also load the published edition from a CDN. Pin the version so it changes only when you choose to update:

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

🚀 Try Orbit now!

Just add .bigbang CSS class in a HTML element like <div>. Then use .gravity-spot class, and within it, add another element with .orbit class. Finally, inside .orbit element, add radial elements, such us: .satellite, .vector, .side, or <o-arc>, <o-progress> web components .

Playground starter example

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

HTML

Orbit and JS frameworks integrations

Orbit can be used in any framework that accepts web-components. Check our specific section that covers how to use Orbit with Vue, React, and Svelte.

Next steps

Congratulations! You have successfully integrated Orbit into your project. Now, you can explore more advanced features and customization options. Check out the full documentation for detailed guides and examples.

Happy coding!