Survey Draw

Installation

pnpm dlx shadcn@latest add @cleverui/loader-survey-draw

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

Usage

tsx

import { LoaderSurveyDraw } from '@/components/ui/loader-survey-draw'

Exampletsx

import { LoaderSurveyDraw } from '@/components/ui/loader-survey-draw'

export default function LoaderSurveyDrawDemo() {
  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 flex-col items-center gap-6 text-center">
        <LoaderSurveyDraw size={56} label="Surveying layout" />
        <div className="space-y-2">
          <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
            Site survey
          </p>
          <p className="text-base font-semibold tracking-tight text-foreground">
            Plotting parcel 14-B
          </p>
          <p className="max-w-xs text-sm leading-relaxed text-muted-foreground">
            Aligning the field grid to the 2024 cadastral baseline before the
            stake-out pack ships.
          </p>
        </div>
      </div>
    </div>
  )
}

API reference

LoaderSurveyDraw accepts the following props.

Prop	Type	Default	Description
`size`	`number`	`48`	frame edge in px
`label`	`string`	`'Loading'`	sr-only status text
`speed`	`number`	`1`	timeline 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.

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.

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.

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.

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 Survey Draw 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-survey-draw`. 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 Survey Draw require?

Survey Draw uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Survey Draw 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