Spinner

Indeterminate loading ring. Inherits `currentColor`.

FeedbackServer-safe

Install

bash

npx @agents-npm-packages/vibeui add spinner --dir ./src/components/ui

Import

tsx

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

API

Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.

<Spinner>

Prop	Type	Default	Description
className	string	—	Extra classes, merged with the component's own.
size	number	18	Size preset.

Source

src/components/ui/spinner.tsx

import { cn } from "@/lib/utils";

/** Indeterminate loading ring. Inherits `currentColor`. */
export function Spinner({
  className,
  size = 18,
}: {
  className?: string;
  size?: number;
}) {
  return (
    <svg
      role="status"
      aria-label="Loading"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      className={cn("animate-spin-quiet text-ink", className)}
    >
      <circle
        cx="12"
        cy="12"
        r="9"
        stroke="currentColor"
        strokeOpacity="0.16"
        strokeWidth="2.5"
      />
      <path
        d="M21 12a9 9 0 0 0-9-9"
        stroke="currentColor"
        strokeWidth="2.5"
        strokeLinecap="round"
      />
    </svg>
  );
}

Exports Spinner. Peer dependencies: clsx, tailwind-merge.