Skip to main content

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.

About Dot Matrix

Dot Matrix is an open-source React component library of expressive dot-matrix loading animations. 55+ loader primitives (Neon Drift, Core Spiral, Twin Orbit, and more) ship via the shadcn registry, so a single `npx shadcn@latest add` drops the source into your project. Built with React, TypeScript, Tailwind CSS, and shadcn/ui. The interactive playground on the site lets you preview every loader and tune props before installing.

Free, open source, maintained by @zzzzshawn.

Pricing model: Free

Features

  • 55+ free, open-source loader animations
  • React + TypeScript + Tailwind + shadcn
  • One-line install via `npx shadcn@latest add`
  • Interactive playground for previewing each loader
  • Copy-paste-friendly — you own the local source

FAQs

Common questions about Dot Matrix

Is Dot Matrix free?
Yes — Dot Matrix is fully open source and free to use in personal and commercial projects.
How do I install a loader?
Run `npx shadcn@latest add` with the registry URL and the component lands as local source in your project.
What stack does it require?
React, TypeScript, Tailwind CSS, and shadcn/ui.