Skip to main content

Dot Matrix

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.

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.

Tags: Open Source, Loaders, Animation, React, shadcn, Components

Try Dot Matrix

Frequently Asked 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.