design-infraReport a problem or share feedback← Catalog
Loader
curatedfreebeui/loader
Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.
$
npx shadcn@latest add @beui/loadernpm deps: clsx, motion, tailwind-merge
Our notes
A compact waiting indicator with multiple visual treatments. Start here for free loading UI; inspect the demo and choose a variant that fits the surrounding content.- Source
- beUI (free)
- Kind
- component
- Categories
- loader
- Use as
- drop-in — replaces your component
- Applies to
- loader
- Motion
- on loop, state · subtle · motion · medium cost
- Tags
- react, tailwind-v4, motion, motion
- Licence
- MIT — Copyright (c) 2026 Saurabh Chauhan; retain the upstream notice when copying source.
- Live demo
- beui.dev
- Docs
- beui.dev
Similar
Compare all 4 →- Agent statusoc/agent-statusInline or avatar-size agent activity indicator: libraries.dev thinking-orbs + shimmering verb + detail line.
- Multi Step Loaderaceternity/multi-step-loaderFull-screen step loader for long operations (generation, onboarding).
- Thinkingbeautifui/thinking-stateExpandable reasoning/search/coding traces — the best open-source 'agent is thinking' panel. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).