Components
Spinner
A smooth, modern circular loading indicator with a track and an active animating stroke.
A clean, centered SVG loading spinner. It features a faint full-circle background track and an active animating arc. It supports customization of size and color via standard Tailwind classes.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/spinner.jsonUsage
16px
24px
32px
import * as React from "react"import { Spinner } from "@/registry/acrylic/spinner"import { ExampleBackdrop } from "@/components/example-backdrop"export default function SpinnerDemo() { return ( <ExampleBackdrop className="flex-col gap-8"> <div className="flex items-center gap-6 rounded-2xl bg-[var(--acr-toast)] p-6 shadow-xl backdrop-blur-md"> <div className="flex flex-col items-center gap-2"> <Spinner size={16} /> <span className="text-[10px] text-muted-foreground font-medium">16px</span> </div> <div className="flex flex-col items-center gap-2"> <Spinner size={24} className="text-primary" /> <span className="text-[10px] text-muted-foreground font-medium">24px</span> </div> <div className="flex flex-col items-center gap-2"> <Spinner size={32} className="text-[var(--acr-green)]" /> <span className="text-[10px] text-muted-foreground font-medium">32px</span> </div> </div> </ExampleBackdrop> )}import { Spinner } from "@/components/acrylic/spinner"
<Spinner size={16} />
<Spinner size={24} className="text-primary" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 16 | The width and height of the spinner icon in pixels. |
Notes
- It defaults to
animate-spinandtext-muted-foreground. - Pass a text color class (e.g.
text-primary,text-[var(--acr-green)]) to change the color of both the track and the active arc. - Used internally by the Acrylic
Toasterfor promise loading indicators.