# Dotmatrix

By **zzzzshawn** · Software & Tools

Open-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.

- Source: https://dotmatrix.zzzzshawn.cloud/
- Repository: https://github.com/zzzzshawn/matrix
- Install: `npm i matrix`
- Tags: open-source, react, typescript, tailwind, shadcn, ui-components, loaders, animations
- Pricing: free
- Upvotes: 0

## Features

- 55+ named dot-matrix loading animations, free and open-source
- shadcn registry install: one CLI command per component
- Manual copy-paste path via the live docs playground
- Built with React, TypeScript, Tailwind CSS, and shadcn
- Live playground to preview all loaders at dotmatrix.zzzzshawn.cloud
- Per-component installs, no monolithic bundle
- Versioned releases (v1.5.0 current)
- Single Next.js repo with registry build tooling included

---

## Why it matters
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.

## The big picture
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.

## How it works
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/`.

## Zoom in
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.

## Yes, but
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.

## The bottom line
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.

## FAQ

### What is Dotmatrix?

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.

### How do I install a Dotmatrix loader into my project?

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.

### Is Dotmatrix free and open source?

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.

### What is Dotmatrix best suited for?

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.

### How does Dotmatrix differ from other loading animation libraries?

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.

### What are the limitations of Dotmatrix?

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.

---
[View on Analog](https://analoghq.ai/zzzzshawn/software-tools/dotmatrix)