Dot Matrix

90 dot-matrix loading animations installed one at a time through a shadcn registry

Tier B · UsefulRegistryAnimation LibraryComponent Librarydotmatrix.zzzzshawn.cloud

(Visit dotmatrix.zzzzshawn.cloud ↗)(Docs)(Repository)(Registry)

Preview image from dotmatrix.zzzzshawn.cloud

Dot Matrix is a single-purpose shadcn registry of dot-matrix loading animations. Each loader is a React and TypeScript component styled with Tailwind and self-contained CSS keyframes. The registry holds 91 items: 90 loaders and one bundle named all, which writes 93 files at once. The loaders come in five shape families, and the name of each one says which: dotm-3x3 20, dotm-circular 20, dotm-square 20, dotm-triangle 20 and dotm-hex 10. One loader installs four files: the loader itself, dotmatrix-core.tsx, dotmatrix-hooks.ts and dotmatrix-loader.css. It pulls no npm dependency and no other registry item. It is for a team that already runs the shadcn CLI and wants one loading vocabulary across a product instead of a generic spinner.

Install

npx shadcn@latest add @dotmatrix/dotm-square-3

For an agent

Reach for this only when a product wants one retro dot-matrix loading identity across many states. For a single ordinary spinner, Loading UI or a plain shadcn Skeleton costs less. Install by the exact registry name, not the marketing name on the site. The site calls one loader "Neon Drift", and the registry calls it dotm-square-3 or similar. The five prefixes are dotm-3x3, dotm-circular, dotm-square, dotm-triangle and dotm-hex. Read https://dotmatrix.zzzzshawn.cloud/r/registry.json for the 91 names. It is the only complete list. The home page says "55+ loaders", which undercounts by 35. Expect four files per install: the loader, dotmatrix-core.tsx, dotmatrix-hooks.ts and dotmatrix-loader.css. The first install writes the shared three, and later ones reuse them. A components.json and a cn util must already exist. Do not call this open source. The home page says "free and open-source", but the LICENSE in the repository is a Custom Proprietary License. It permits commercial use and forbids you to publish any component as a standalone reusable component or as part of another component library. Never vendor it into another registry.

Why it is here. One of the few loader sets with a coherent visual language rather than a grab-bag of spinners, which makes loading states feel authored instead of default. The mismatch between its 'open-source' claim and its actual proprietary licence is the thing to know before adopting it.

Install command, framework, licence and component list.

Facts

License: Source available
Pricing: Free, Sponsor or ad supported
Framework: React, Next.js
Styling: Tailwind CSS, Vanilla CSS
Distribution: shadcn registry, CLI installer, Copy-paste snippet, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Machine-readable registry item, CLI installable, Copy-paste ready code, Structured documentation
Accessibility: Unknown
Maturity: Actively maintained
GitHub stars: 586

Components it ships

90 total

Spinner Animation

Helps you build

Saving Changes Submitting A Form

Notable for

90 loaders in five shape families
per-loader shadcn registry install
self-contained CSS keyframes, zero npm dependencies
an all bundle that writes 93 files
licence contradicts its open-source claim

Provenance

Verified 2026-09-05. HTTP 200. https://dotmatrix.zzzzshawn.cloud/ 200, 995,898 bytes, title "Dot Matrix". Its meta description reads "Dot Matrix is a React component library of dot matrix loaders-expressive loading primitives you install via the shadcn registry and own as local code." The home page states "55+ free and open-source loaders, built with React, TypeScript, Tailwind CSS, and shadcn" and shows the install line "npx shadcn@latest add @dotmatrix/dotm-square-3". https://dotmatrix.zzzzshawn.cloud/r/registry.json 200 and holds 91 items, all of type registry:ui. 90 carry the dotm prefix and one is named all. Counting the prefixes: dotm-3x3 20 (1 to 21 with 17 absent), dotm-circular 20, dotm-square 20, dotm-triangle 20, dotm-hex 10. https://dotmatrix.zzzzshawn.cloud/r/dotm-square-3.json 200 and lists dependencies [] with four files: components/ui/dotm-square-3.tsx, components/ui/dotmatrix-core.tsx, components/ui/dotmatrix-hooks.ts and components/dotmatrix-loader.css. https://dotmatrix.zzzzshawn.cloud/r/all.json 200 with 93 files and no dependencies. /getting-started/introduction, /playground and /showcase all return 200. /robots.txt 200 and /sitemap.xml 200 at 268 bytes. /llms.txt returns 404, and /zzz-not-a-page also returns 404, so the site has no catch-all route. GitHub API for zzzzshawn/matrix: 586 stars, 30 forks, licence reported as Other, last push 2026-07-03. The raw LICENSE reads "Custom Proprietary License", "Copyright (c) 2026 dot-matrix contributors", grants use "including in commercial and non-commercial products", and prohibits "Publishing, distributing, or presenting any component from this project as a standalone reusable component, or claiming it as part of another component library". Previous check on 2026-08-15 recorded 85 loaders and 546 stars.

Also in Component Libraries

dotmatrix.zzzzshawn.cloudTier B