DotMatrix

Overview

Dot Matrix is a React component library of dot matrix loaders created by shawn. Each loader is an expressive loading primitive installed through the shadcn registry and kept as local code. The site describes 55+ free and open-source loaders, and the registry manifest currently lists 90 loader items plus an all bundle.

Loaders are grouped by grid shape: square, circular, triangle, hex and 3x3 families, with names like Neon Drift, Core Spiral, Helix Glow, Radar Arc and Comet Trail. The site includes a playground and showcase, and the library is at version 1.5.0.

Features

• Square loaders: 20 square-grid patterns such as dotm-square-3.
• Circular loaders: 20 circular patterns.
• Triangle loaders: 20 triangular patterns.
• Hex and 3x3 loaders: 10 hex patterns and a set of compact 3x3 grids.
• Install all: An all registry item adds every loader at once.
• Playground and showcase: Dedicated pages for trying loaders and seeing them in use.

Tech stack

• React, TypeScript
• Tailwind CSS
• shadcn/ui

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @dotmatrix/component-name