Menu

loading-ui: 36+ Copy-paste Loading Indicator Components for React
πŸ“°
0

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

DEV CommunityΒ·jQueryScriptΒ·about 1 month ago
#zOpTHInp
#react#webdev#software#coding#shadcn#loading
Reading 0:00
15s threshold
Cover image for loading-ui: 36+ Copy-paste Loading Indicator Components for React

jQueryScript

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

Read More