Open-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
What it does
Dotmatrix is a free, open-source library of 55+ dot-matrix-style loading animations built with React, TypeScript, Tailwind CSS, and shadcn. Install any loader via the shadcn registry in one command, or copy the source manually from the docs site.
Loading states are the last mile of polished UI, and most teams ship a spinner and move on. Dotmatrix gives React developers 55+ named, ready-to-drop-in animations that feel considered rather than default.
Dotmatrix is a shadcn-compatible component registry, not a monolithic package. Each loader is a standalone component you pull in selectively, so you never import what you don't use. The docs site at dotmatrix.zzzzshawn.cloud doubles as a live playground where you can audition every animation before committing.
Install via the shadcn CLI with a single command: npx shadcn@latest add @dotmatrix/<loader-name>. That pulls the component straight from the published registry into your project. If you prefer full control, the docs site also offers manual copy-paste, no build pipeline required. The repo is a single Next.js app; loaders live in loaders/, and the registry is generated by pnpm registry:build into public/r/.
The library covers a wide aesthetic range: geometric forms (Hex Orbit, Prism Bloom, Chevron March), physics-flavored motion (Liquid Vortex, Hourglass Flip, Gravity Arc), and retro CRT styles (CRT Glide, Binary Bloom, Braille Beat). Naming is deliberate, which makes discovery via the playground fast. Version 1.5.0 is the current release per the project site.
Dotmatrix is React-only and assumes a Tailwind CSS environment. Teams on Vue, Svelte, or plain CSS will need to port the components manually. The library also does not publish to npm as a traditional package, so your dependency graph stays clean but updates require re-running the registry install command per component.
If your stack is React plus Tailwind plus shadcn, Dotmatrix fills the loading-animation gap faster than building from scratch and with more personality than a generic spinner library. One command, one component, done.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Cost
Dotmatrix is free and open-source with no paid tiers mentioned.
Dotmatrix is a free, open-source library of 55+ dot-matrix-style loading animations built with React, TypeScript, Tailwind CSS, and shadcn. Each animation is a standalone, named component (like Hex Orbit, Liquid Vortex, or Braille Beat) that you install individually rather than as a monolithic package. The project is versioned at v1.5.0 and ships a live playground at dotmatrix.zzzzshawn.cloud where you can preview every loader.
The primary method is the shadcn CLI: run `npx shadcn@latest add @dotmatrix/<loader-name>` and the component is pulled from the Dotmatrix registry directly into your codebase. If you prefer not to use the CLI, the docs site provides the full source for every loader so you can copy and paste it manually. Either way, no npm package installation or build step beyond your existing Tailwind setup is needed.
Yes, Dotmatrix is free and open-source. The source repository is hosted on GitHub at github.com/zzzzshawn/matrix, and the docs site states all 55+ loaders are free. No paid tier or licensing cost is mentioned anywhere in the project's documentation.
Dotmatrix is best suited for React projects already using Tailwind CSS and shadcn/ui that need high-quality, varied loading states without building animations from scratch. The per-component registry model means you only pull in what you actually use, keeping bundles lean. Teams that want to audition animations visually before committing will benefit from the live playground.
Unlike traditional npm animation packages (which you install as a whole and import from), Dotmatrix uses a shadcn-style registry where each component is installed individually and lives directly in your codebase as editable source. This means no runtime dependency to manage and full control to tweak every animation. The tradeoff is that updates require re-running the install command rather than bumping a package version.
Dotmatrix is React-only and requires a Tailwind CSS environment, so it does not work out of the box with Vue, Svelte, Angular, or plain CSS projects. Because it distributes through a shadcn registry rather than npm, there is no automatic update mechanism, you must reinstall individual components to get changes. Additionally, getting a loader listed in shadcn's official registry directory requires a separate pull request to the shadcn-ui/ui repository, which is outside this project's scope.
shawn.@zzzzshawn
“Introducing dotmatrix v1.5.0 +10 new hex loaders New playground to tweak loaders (uses dialkit by @joshpuckett) bloom and halo effects added Cheers”
jQueryScript@jqueryscript
“Dotmatrix Loader Library: 55+ free and open-source loaders, built with React, TypeScript, Tailwind CSS, and shadcn. Install one, copy the code, and make it yours.”
Free, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
Best for Teams building React and Tailwind CSS products that already use shadcn/ui and need consistent pending states fast78+ 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 overheadOpen-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 fastDependency-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 codeAnimated 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