# [Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/>)

[dotmatrix.zzzzshawn.cloud](<https://dotmatrix.zzzzshawn.cloud/>)

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

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Web Design](<https://creatorstoolbox.com/communities/web-design>)[Development](<https://creatorstoolbox.com/communities/development>)[Open Source](<https://creatorstoolbox.com/communities/open-source>)[Animation & Motion](<https://creatorstoolbox.com/communities/animation>)

Media 1 of 3

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

## Similar products

- [![useLayouts](<https://www.google.com/s2/favicons?domain=uselayouts.com&sz=128>)

useLayoutsuselayouts.com

Free animated React components and micro-interactions built with Framer Motion and Tailwind CSS, designed to work with shadcn/ui.](<https://creatorstoolbox.com/products/uselayouts>)

- [![beUI](<https://www.google.com/s2/favicons?domain=beui.dev&sz=128>)

beUIbeui.dev

Free, open-source animated components for React and Next.js — 108 motion primitives and blocks built with Motion and Tailwind, installable via the shadcn CLI.](<https://creatorstoolbox.com/products/beui>)

- [![Border Beam](<https://www.google.com/s2/favicons?domain=jakubantalik.com&sz=128>)

Border Beambeam.jakubantalik.com

A lightweight React component that renders an animated glowing border beam effect — multiple sizes, color variants, and themes.](<https://creatorstoolbox.com/products/border-beam>)

- [![Arc UI](<https://www.google.com/s2/favicons?domain=uiarc.dev&sz=128>)

Arc UIuiarc.dev

Motion-rich React components and complete UI blocks for shadcn and Next.js, with live examples and AI-readable docs.](<https://creatorstoolbox.com/products/arc-ui>)

- [![Loading UI](<https://www.google.com/s2/favicons?domain=loading-ui.com&sz=128>)

Loading UIloading-ui.com

Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.](<https://creatorstoolbox.com/products/loading-ui>)

- [![Loading.dev](<https://loading.dev/favicon.ico>)

Loading.devloading.dev

A free, open-source collection of animated loading indicators for React, with live previews and copyable usage examples.](<https://creatorstoolbox.com/products/loading-dev>)

---
Canonical source: https://creatorstoolbox.com/products/dotmatrix