Install Dot Matrix from the registry

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.

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.

{
  "$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:

npx shadcn@latest add @dotmatrix/dotm-square-3

Or install everything in one step:

npx shadcn@latest add @dotmatrix/all

• - `@dotmatrix/dotm-square-3`
• - `@dotmatrix/dotm-circular-5`
• - `@dotmatrix/dotm-triangle-2`
• - `@dotmatrix/all`

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

Ensure loader styles are imported

Dot Matrix loaders depend on dotmatrix-loader.css. If your setup does not inject it automatically, add this import in app/globals.css.

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "../components/dotmatrix-loader.css";
@custom-variant dark (&:is(.dark *));

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.

import { DotmSquare3 } from "@/components/ui/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.