ReUI Spinner

Component 4

About

ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReUI Spinner to your project and fits it to your theme.

Code

How ReUI Spinner is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Spinner } from "@/components/ui/reui-spinner"

export default function Pattern() {
  return (
    <div className="mx-auto flex w-full max-w-xs flex-col gap-3">
      <div className="flex items-center gap-2">
        <Spinner className="size-3.5" />
        <span className="text-muted-foreground text-sm">
          Checking availability...
        </span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner className="text-success size-3.5" />
        <span className="text-sm">
          <span className="text-success font-medium">Connected</span>
          <span className="text-muted-foreground"> — syncing data</span>
        </span>
      </div>
      <div className="flex items-center gap-2">
        <Spinner className="text-warning size-3.5" />
        <span className="text-sm">
          <span className="text-warning font-medium">Reconnecting</span>
          <span className="text-muted-foreground"> — attempt 3 of 5</span>
        </span>
      </div>
    </div>
  )
}

// Rebuild the demo when the shared Spinner implementation changes.