Free, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
What it does
A free, MIT-licensed registry of React loading animations built for copy-paste and CLI-friendly workflows. Loading UI ships spinners, skeletons, dots, and motion primitives that drop into shadcn-compatible projects without a heavy design system or animation framework dependency.
Most products ship one generic spinner everywhere or rebuild the same loading patterns from scratch for every new surface. A free, MIT-licensed registry of React loading animations, Loading UI sits in the middle: focused components you copy once and own completely, per loading-ui.com/docs.
Loading UI follows the same registry model that shadcn/ui popularized for general UI components, but narrows its scope to one job: pending states. That constraint is the whole point. There is no runtime dependency to pin, no design-system contract to inherit. The component arrives in your codebase as plain code you adapt to your spacing, color, and motion tokens.
If your project already runs React, Tailwind CSS, and a components.json setup compatible with the shadcn CLI, the install path is short. Add the registry, run the CLI to pull a component, then style it like the rest of your UI. The docs at loading-ui.com/docs describe the workflow as "registry-based distribution that fits into existing shadcn-style workflows."
The library ships over 50 named primitives organized by type: ring variants (ring, orbit-ring, satellite-ring, clock-ring, comet-spinner), dot families (dots, bobbing-dots, bouncing-dots, pulsating-dots), text effects (text-shimmer, text-blink, text-shimmer-wave), shape animations (accordion-loader, square-snake, infinity-track), and specialty states (skeleton, terminal, analyzing-image, wandering-eyes). That range covers most product surfaces without overlap.
The library requires React and Tailwind CSS. Teams on Vue, Svelte, or vanilla JS will need to look elsewhere, the components are not framework-agnostic. There is also a real risk of motion-token drift: because each component lives as a copy in your repo, animation timing and scale values can diverge from each other over time if you do not maintain a shared loading-tokens.css or equivalent token layer from day one.
The GitHub repository is MIT-licensed and community-maintained. The contributing guide notes it takes roughly 5 minutes to add a new component, which keeps the quality bar variable. Evaluate each component individually rather than assuming uniform production readiness across all 50+.
A free, MIT-licensed registry of React loading animations is the fastest path to consistent pending states in a shadcn-style stack. The copy-paste model means zero lock-in and full adaptability, but discipline around shared motion tokens is your responsibility once the code lands in your repo.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Cost
Free and MIT-licensed with no pricing tiers mentioned.
Go deeper
Direct third-party write-up of Loading UI's 36 shadcn-compatible React components, covering component types, CLI workflow, and practical usage—the most on-subject external review available.
A free, MIT-licensed registry of React loading animations, Loading UI is a focused collection of over 50 spinners, skeletons, dots, bars, text effects, and specialty loading states for modern web apps. It follows the copy-paste and CLI-friendly model that shadcn/ui popularized, but limits its scope strictly to pending and loading states. The docs at loading-ui.com/docs describe it as 'a small custom registry of loading indicators for modern React apps' that avoids introducing a heavy design system or animation framework.
Loading UI is designed for projects already running React, Tailwind CSS, and a components.json setup compatible with the shadcn CLI. You add the Loading UI registry to your project, then use the CLI to pull individual components directly into your codebase. Once installed, each component is plain code you own, style against your existing Tailwind tokens, and ship like any other file in your repo, no package import required at runtime.
Yes, Loading UI is licensed under the MIT license per its GitHub repository, and the project's homepage states it is 'free and open source, forever.' Because the distribution model copies code into your project rather than shipping a versioned npm package you depend on, there is no runtime library cost to your bundle either.
Loading UI is best for React and Next.js teams using Tailwind CSS and a shadcn-compatible setup who need consistent, product-quality loading states without rebuilding the same patterns for every screen. It is particularly ergonomic for Next.js loading.tsx files and React Suspense boundaries because there is no runtime import: the component renders immediately with no additional network waterfall. Specialty states like skeleton, terminal, and analyzing-image cover surfaces that generic spinner libraries miss.
Loading UI and Framer Motion solve different problems. Framer Motion is a full animation runtime that lets you build custom animate-in and animate-out sequences from scratch, at the cost of adding its package weight to your bundle. Loading UI gives you pre-built, owned loading states with zero runtime dependency: the code lives in your repo and adds nothing to your JavaScript bundle. For teams that need bespoke, choreographed transitions across the full UI, Framer Motion offers more expressive power. For teams that need reliable, consistent pending states fast and want to keep bundle size flat, Loading UI wins on ergonomics.
Loading UI is React-only and requires Tailwind CSS and a shadcn-compatible components.json setup, so Vue, Svelte, and vanilla JS projects cannot use it without a full rewrite of each component. Because the copy-paste model places every component directly in your repo, animation timing and scale values can drift from each other across a large codebase if you do not maintain a shared token layer from the start. The library is community-maintained, and the contributing guide notes it takes roughly 5 minutes to add a new component, which means individual component quality varies and each should be evaluated before shipping to production.
Open-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
Best for React and Tailwind CSS teams who want polished, on-brand loading animations without building from scratch78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadDependency-free gallery of math-driven loading animations (rose, Lissajous, cardioid, and more) with formulas and copyable code for UI builders.
Best for Builders who want visually distinctive loading animations grounded in named mathematical curvesshadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
Best for Teams building a custom design system who need full ownership of component source codeOpen-source glassmorphism component library for shadcn/ui, 21 Apple-inspired glass UI components for Next.js and React, installed via the shadcn registry.
Best for Teams building Next.js or React apps that already use shadcn/ui and want a coherent glass aesthetic fastAnimated WebGL liquid-metal shader for React buttons and chips, one component, three presets, zero layout shifts.
Best for React devs who want a real-time WebGL metal ring on CTA buttons without a custom shader setup