Usage

Install Dot Matrix from the registry

Dot Matrix loaders ship through a custom shadcn registry (scoped as @dotmatrix in the CLI) so the install flow stays familiar: configure once, pull the items you need, then adapt each loader to your product.

Prerequisites

  • - React app already running
  • - Tailwind CSS configured
  • - `components.json` present for shadcn CLI
  • - path aliases aligned with your component structure

If your project does not have `components.json` yet, initialize shadcn first.

Initialize shadcn

npx shadcn@latest init

Configure the registry

Add the @dotmatrix entry in the registries field of components.json so the CLI can resolve items like @dotmatrix/dotm-square-3.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "tailwind": {
    "css": "app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@dotmatrix": "https://dotmatrix.zzzzshawn.cloud/r/{name}.json"
  }
}

Install a component

Pull any loader into your app with the shadcn CLI:

Install loader

npx shadcn@latest add @dotmatrix/dotm-square-3
  • - `@dotmatrix/dotm-square-3`
  • - `@dotmatrix/dotm-circular-5`
  • - `@dotmatrix/dotm-triangle-2`

Installed files are local. Rename, restyle, and retime motion as needed.

Use in real UI states

Keep indicators close to the action they describe. Inline usage works well when only part of the interface is pending.

Save button example

import { DotmSquare3 } from "@/components/dotmatrix/dotm-square-3";

export function SaveButton({ isSaving }: { isSaving: boolean }) {
  return (
    <button
      type="button"
      disabled={isSaving}
      className="inline-flex items-center gap-2 rounded-md border px-3 py-2"
    >
      {isSaving ? <DotmSquare3 size={18} dotSize={3} aria-label="Saving" /> : null}
      <span>{isSaving ? "Saving..." : "Save changes"}</span>
    </button>
  );
}

Usage guidelines

  • - Use inline loaders when only a local region is pending.
  • - Prefer skeletons when preserving content shape matters most.
  • - Pair motion with accessible text when context is not obvious.
  • - Avoid multiple competing loaders in one viewport.

Next step

Browse the components gallery for specific primitives, or read the introduction for what Dot Matrix is aiming for and its constraints.