Ink Dots

Installation

pnpm dlx shadcn@latest add @cleverui/loader-ink-dots

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

Usage

tsx

import { LoaderInkDots } from '@/components/ui/loader-ink-dots'

Exampletsx

import { LoaderInkDots } from '@/components/ui/loader-ink-dots'

export default function LoaderInkDotsDemo() {
  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 gap-6 rounded-2xl border border-border/60 bg-card px-6 py-8">
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
              Draft reply
            </p>
            <p className="mt-2 text-sm font-medium tracking-tight text-foreground">
              Meridian Logistics · RFP follow-up
            </p>
          </div>
          <LoaderInkDots size={8} label="Composing draft" />
        </div>
        <div className="space-y-2 border-t border-border/60 pt-5">
          <p className="text-sm leading-relaxed text-muted-foreground">
            Pulling three sources, last bid sheet, Q1 SLA notes, and the
            warehouse tour transcript…
          </p>
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            3 attachments · ~12s
          </p>
        </div>
      </div>
    </div>
  )
}

API reference

LoaderInkDots accepts the following props.

Prop	Type	Default	Description
`size`	`number`	`10`	dot diameter in px
`label`	`string`	`'Loading'`	sr-only status text
`speed`	`number`	`1`	animation speed multiplier

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

Related components

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.

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.

Ledger Fill

A mono working readout, "reconciling 047/128" with tabular digits rolling in a masked slot above a hairline progress rule. Determinate via a progress prop, or indeterminate by default.

Morse Pulse

A short word transmitted in morse, dot and dash glyphs pulse in sequence on a telegraph cadence, with the word as a mono legend beneath. Playful, legible, sub-3Hz. Pure CSS, zero deps.

Orbit Trio

Three bodies orbit a common center at staggered phases, each towing a short decaying trail, a micro ephemeris as spinner. One body burns primary. Tiny SVG, pure CSS animation, zero deps.

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.

Frequently asked questions

How do I install the Ink Dots 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-ink-dots`. 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 Ink Dots require?

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

Can I theme Ink Dots 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