Spinner

Preview

'use client';

import { Spinner } from '@/registry/san-francisco/ui/spinner';

export default function SpinnerDemo() {
  return <Spinner />;
}

Installation

bun

bunx shadcn@latest add @sft-ui/spinner

Sizes

'use client';

import { Spinner } from '@/registry/san-francisco/ui/spinner';

export default function SpinnerDemoSizes() {
  return (
    <>
      <Spinner className="size-4" />
      <Spinner />
      <Spinner className="size-8" />
    </>
  );
}

API Reference

Spinner

An animated loading indicator using Loader2Icon. Set size via className (default is size-4).

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply (use for sizing, e.g. `size-6`).

All standard SVG attributes are supported via React.ComponentProps<"svg">.