DEV Community

Cover image for loading-ui: 36+ Copy-paste Loading Indicator Components for React
jQueryScript
jQueryScript

Posted on

loading-ui: 36+ Copy-paste Loading Indicator Components for React

loading-ui: a custom shadcn registry of loading indicators for React apps.

It ships 36 components through the standard shadcn CLI workflow. The set covers spinners, rings, dot sequences, text animations, orbital patterns, and more. Each component lands in your project as editable source code.

Key highlights:

  • Install via npx shadcn@latest add @loading-ui/[slug]
  • Tailwind CSS styling with CSS variable hooks
  • motion/react animations with configurable timing
  • ARIA role and screen reader labels included by default
  • Copy-paste from the docs if you skip the CLI

Works in any React app already configured with shadcn, Tailwind, and components.json.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

React #TailwindCSS #shadcn #WebDev #Frontend

Top comments (0)