Working border

Free

A surface whose edge carries a moving light only while real work is pending, such as an agent run or an import. When the work ends the light stops.

Installs components/ui/working-border.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/working-border.json

Importing 2,184 transactions…

Matching payees and categories. You can leave this page.

When to use #

Use it for

A card or panel that is busy as a whole.
Showing which of several items is running.

Skip it when

Decoration; it must mean work is happening.
Long idle states; say queued, not running.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/working-border.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { Inbox } from "lucide-react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ResultIcon } from "@/components/ui/result-icon"
import { WorkingBorder } from "@/components/ui/working-border"

export function WorkingBorderDemo() {
  const [running, setRunning] = useState(true);
  return (
    <div className="grid w-full max-w-md gap-3">
      <WorkingBorder active={running} className="grid gap-2 p-4">
        <div className="flex items-center gap-2">
          <ResultIcon status={running ? "pending" : "success"} size={16} />
          <span className="text-sm font-medium">{running ? "Importing 2,184 transactions…" : "Imported 2,184 transactions"}</span>
        </div>
        <p className="text-sm text-muted-foreground">{running ? "Matching payees and categories. You can leave this page." : "41 need a category. Review them in Inbox."}</p>
      </WorkingBorder>
      <Button size="sm" variant="secondary" className="justify-self-start" onClick={() => setRunning((r) => !r)}>
        {running ? "Finish import" : "Run again"}
      </Button>
    </div>
  );
}

API reference #

WorkingBorder

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

active *boolean—True while the work is actually pending.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.