Description
Dotmatrix is an open source collection of more than 55 dot matrix style loading animations for React, TypeScript, and Tailwind CSS, distributed through its own shadcn registry. A single loader can be installed with the shadcn CLI (npx shadcn@latest add @dotmatrix/dotm-<name>), or the entire package at once (@dotmatrix/all). After installation the code lives locally in the project and can be renamed, restyled, and re-timed like any other code the team wrote itself. A playground view on the website lets you tune dot size, speed, color preset, pattern, dot shape, bloom, and opacity live and copy the resulting props directly.
The scope stays deliberately narrow: Dotmatrix delivers loaders only, no cards, heroes, or forms, and does not replace a full design system. It requires an existing React application with Tailwind CSS already configured and an existing components.json for the shadcn CLI, along with matching path aliases in the project. Anyone copying loader snippets from the gallery instead of installing through the CLI first sets up the shared runtime files once (dotmatrix-core.tsx, dotmatrix-hooks.ts, dotmatrix-loader.css) and imports their CSS globally. The default color palettes are built around neon and accent colors and need to be remapped for the team's own brand, and there is no reduced-motion fallback out of the box.
Compared with a plain default spinner from shadcn or Tailwind, Dotmatrix is worth reaching for where a loading animation should be part of the brand experience, for example on buttons, route transitions, or as an alternative to a skeleton state. For an indicator that is only visible for a few hundred milliseconds, or in projects with a tight bundle budget or a very restrained visual language, the overhead of an extra registry dependency is rarely justified.
