{
  "name": "spinner",
  "title": "Spinner",
  "description": "An ember comet orbiting a faint glass track — a fading tail behind a luminous head. For short, unmeasurable waits; the spin slows down when the user prefers reduced motion.",
  "category": "feedback",
  "install": {
    "command": "npx shadcn@latest add @clow/spinner",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "size": {
      "type": "select",
      "options": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md",
      "description": "sm fits inside buttons and inputs, md is the default inline size, lg for page-level loading."
    },
    "label": {
      "type": "text",
      "default": "Loading",
      "description": "Accessible status label announced to screen readers."
    }
  },
  "agent": {
    "prompt": "Use Spinner for short waits with no measurable completion: fetching, submitting, connecting. size=sm inside buttons next to the label, md inline in content, lg for whole-panel loading states. Set label to describe what is loading. Use Progress instead when completion is measurable, and Skeleton for initial page-structure loading.",
    "examples": [
      "<Spinner />",
      "<Button disabled><Spinner size=\"sm\" className=\"text-current\" label=\"Connecting\" />Connecting…</Button>",
      "<Spinner size=\"lg\" label=\"Scanning relays\" />"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/spinner",
    "markdown": "https://clow.cards/llms/spinner.md",
    "registryItem": "https://clow.cards/r/spinner.json"
  }
}
prop	type	default
size	sm \| md \| lg	md
label	text	Loading
Draw

Playground

Examples

Props
