---
name: "@shadcnloaders"
slug: "shadcnloaders"
description: "A public registry of shadcn-inspired animated loaders and loading states."
category: "Animated components"
tags: ["animation", "loaders"]
framework: "react"
license: null
author: null
website: "https://shadcn-loaders.vercel.app"
github: null
registry: "https://shadcn-loaders.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 1
generated_at: "2026-07-28T08:59:05.895Z"
---

# @shadcnloaders

A public registry of shadcn-inspired animated loaders and loading states.

## Links

- Website: https://shadcn-loaders.vercel.app
- Registry JSON: https://shadcn-loaders.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/shadcnloaders
- This file: https://sh4dcn.vercel.app/md/shadcnloaders.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcn-loaders.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://shadcn-loaders.vercel.app/r/registry.json
bunx shadcn@latest add https://shadcn-loaders.vercel.app/r/registry.json
# fetch the raw registry index
curl -s https://shadcn-loaders.vercel.app/r/registry.json
```

## Components (1)

| name | type | description | install |
| --- | --- | --- | --- |
| loader | registry:ui | A single flexible loading spinner component with 22 built-in animated variants (spinner, dots, bars, skeleton, DNA, matrix and more), Tailwind dark mode suppor… | `npx shadcn@latest add https://shadcn-loaders.vercel.app/r/loader.json` |

## For AI agents

```text
You are adding components from @shadcnloaders to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/shadcnloaders.md) for the component list.
2. Fetch the machine-readable index: https://shadcn-loaders.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: shadcnloaders).
```