Get started
Install loaders with the shadcn CLI or copy the source into your project. Each loader is a single React component with inline CSS and no dependencies.
01 — Set up shadcn
Already using shadcn? You can skip this step.
npx shadcn@latest init02 — Add the registry
Register the @loadercn namespace in your components.json. You only need to do this once per project.
npx shadcn@latest registry add @loadercn=https://loadercn.vercel.app/r/{name}.json{
"registries": {
"@loadercn": "https://loadercn.vercel.app/r/{name}.json"
}
}03 — Add a loader
Every loader has its own install command. Pick one from the sidebar to copy it, or swap the name below.
npx shadcn@latest add @loadercn/classic-ringSkipping the namespace? Install directly from the URL instead.
npx shadcn@latest add https://loadercn.vercel.app/r/classic-ring.json04 — Use it
The component lives in your codebase, so every detail is yours to change.
import { ClassicRing } from "@/components/ui/classic-ring"
export function Saving() {
return <ClassicRing size={32} speed={1.2} className="text-primary" />
}05 — Props
Every loader shares the same API and respects reduced-motion preferences.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 40 | Width and height in pixels. |
| speed | number | Varies | Duration of one complete cycle, in seconds. Defaults to 1.6; spherical loaders use 3.2 or 4.8. The preview shows each loader’s default. |
| label | string | "Loading" | Accessible label announced to screen readers. |
| className | string | — | Merged onto the root element. Loaders inherit text color. |
| style | CSSProperties | — | Merged onto the root element. |
06 — Copy and paste
Prefer to skip the CLI? Every loader includes its complete React source in the Source tab. Styles are included, no shadcn setup required.