Orbit Trio

Installation

pnpm dlx shadcn@latest add @cleverui/loader-orbit-trio

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { LoaderOrbitTrio } from '@/components/ui/loader-orbit-trio'

Exampletsx

import { LoaderOrbitTrio } from '@/components/ui/loader-orbit-trio'

export default function LoaderOrbitTrioDemo() {
  return (
    <div className="mx-auto flex min-h-[360px] max-w-md flex-col items-center justify-center gap-8 px-6 py-20">
      <div className="flex w-full max-w-sm flex-col items-center gap-6 rounded-2xl border border-border/60 bg-card px-6 py-10">
        <LoaderOrbitTrio size={48} label="Computing ephemeris" />
        <div className="space-y-2 text-center">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Orbit desk
          </p>
          <p className="text-base font-semibold tracking-tight text-foreground">
            Resolving transfer windows
          </p>
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            Three-body check against the LEO catalog before the burn schedule
            locks for pass 42.
          </p>
        </div>
      </div>
    </div>
  )
}

API reference

LoaderOrbitTrio accepts the following props.

Prop	Type	Default	Description
`size`	`number`	`40`	orbit diameter in px
`label`	`string`	`'Loading'`	sr-only status text
`speed`	`number`	`1`	revolution speed multiplier

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Survey Draw

The brand as a spinner, a small blueprint frame with edge ticks and a corner registration cross that draws itself, holds, undraws, and redraws in a calm loop. SVG stroke work.

Blueprint Scan

A small drafting plate under survey, a hairline sweep crosses it while corner registration ticks resolve in its wake, holds, and rescans. The sweep carries the only primary ink. SVG and motion.

Percent Ring

Determinate loading ring, hairline token track, primary arc, tabular mono percent at center and a micro-label beneath. Falls back to an orbiting indeterminate segment when no progress is given.

Diazo Develop

A blueprint develops as data arrives, latent linework surfaces in ink-density order, no sweep, bound to a 0-100 progress prop. React SVG preloader on Tailwind tokens with live percent.

Glyph Cycle

A single mono glyph slot rolls through a deterministic character set behind a mask, and when the done prop flips, it rolls once more onto a primary check and stops. A one-character machine.

Ink Dots

Three ink dots with a liquid squash-and-merge cadence, a scoped SVG goo filter fuses them as they meet, then they rebound apart. A working ellipsis, tiny and cheap. Pure CSS animation.

Frequently asked questions

How do I install the Orbit Trio component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/loader-orbit-trio`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Orbit Trio require?

Orbit Trio has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Orbit Trio to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code