OrbitUI

Dependency-free floating positioning with lifecycle-owned geometry and middleware.

Version

v2.0.3

Size

4.2 KB gzip

Dependencies

Zero dependencies

Runtime support

Browser

Key exports

autoUpdatecomputePositioncreatePositioner

Works well with

ore refine prism

Why Orbit?

Floating UI needs one owner for CSS coordinates, clipping boundaries, updates, and cleanup. Orbit provides a lifecycle positioner for normal UI and a pure computation API for advanced integrations.

// Before
const { x, y } = computeSomehow(trigger, panel);
panel.style.left = `${x}px`;
panel.style.top = `${y}px`;

// After
const positioner = createPositioner(trigger, panel);
positioner.start();

Feature	Manual DOM positioning	Orbit
Bundle size	0 B	4.2 KB
Root dependencies	Application-defined
Clipping boundary	Manual geometry	clippingAncestors default
Coordinate strategy	Consumer logic	fixed / absolute
Cleanup	Manual listeners	dispose()

Use Orbit when floating UI needs robust placement, collision handling, or reactive updates.

Consider direct CSS when placement is static and never depends on element geometry.

Installation

pnpm

pnpm add @vielzeug/orbit

npm

npm install @vielzeug/orbit

yarn

yarn add @vielzeug/orbit

Quick Start

Start a positioner only after its reference and floating elements mount.

import { createPositioner, flip, offset, shift } from '@vielzeug/orbit';

const positioner = createPositioner(trigger, tooltip, {
  middleware: [offset(8), flip(), shift({ padding: 6 })],
  placement: 'top',
});

positioner.start();
positioner.dispose();

Features

• createPositioner() — Lifecycle-owned floating positioning
• computePosition() — Low-level calculation for advanced integrations
• autoUpdate() — Scroll, viewport, resize, and animation-frame updates
• Middleware — Offset, flip, shift, size, hide, arrow, inline, auto-placement
• strategy — Explicit fixed or absolute coordinate behavior
• /reactive — Optional Ripple position readable

Documentation

• Usage Guide
• API Reference
• Examples
• Migration Guide

See Also

• Refine — Accessible components using floating UI behavior.
• Ore — Lifecycle ownership for custom-element positioning.
• Prism — Chart tooltips positioned from virtual references.