Introduction

Dot Matrix: dot matrix loaders that feel intentional

Dot Matrix is a component library built around dot matrix loaders. Install from the shadcn registry and ship loading states that feel designed, lightweight, and easy to maintain. The collection stays focused: expressive loading primitives for modern React interfaces without a full design framework.

What this project is

Dot Matrix follows the same install model many teams already use with shadcn: pull a component into your codebase, then edit it like local code. The collection stays compact on purpose so loaders can blend into your existing UI language instead of forcing a separate aesthetic.

Why it exists

  • - focused loading components instead of a full design framework
  • - open source code you own after installation
  • - registry distribution that fits existing shadcn-style workflows
  • - primitives that adapt to your spacing, color, and motion tokens quickly

How it fits your stack

The setup works best in React apps already using Tailwind CSS with a shadcn-compatible `components.json`. In that environment, onboarding is short: add the registry, install a loader, and style it to match your product.

Start here

Jump into Usage to install your first component, or review the loader gallery to preview available primitives.