Dot Matrix

https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Admin

Dot Matrix is a collection of customizable and accessible loader components for React apps,...

Tokens:680

Snippets:10

Trust Score:5.6

Update:2 months ago

Show doc for...

Tokens:

Raw

### Install Dot Matrix loaders

Source: https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Commands to install specific loaders or the entire collection via the shadcn CLI.

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

```bash
npx shadcn@latest add @dotmatrix/all
```

--------------------------------

### Implement loader in UI

Source: https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Example of using a Dot Matrix loader within a button component to indicate a pending state.

```tsx
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>
  );
}
```

--------------------------------

### Initialize shadcn

Source: https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Run this command to initialize the shadcn CLI in your project if it is not already configured.

```bash
npx shadcn@latest init
```

--------------------------------

### Configure components.json

Source: https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Add the @dotmatrix registry entry to your components.json file to enable component resolution.

```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"
  }
}
```

--------------------------------

### Import loader styles

Source: https://dotmatrix.zzzzshawn.cloud/getting-started/usage

Ensure the required CSS is imported in your global stylesheet if not handled automatically.

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

Tokens:

Raw