Setup

Install from the

@sv/loaders

registry with either

jsrepo

shadcn-svelte

. Both flows install the same shared

dot-matrix

foundation plus the loader you pick.

Install With jsrepo

If you're following the example below, choose

dot-matrix

and

square-1

from the picker.

pnpm dlx jsrepo add --registry @sv/loaders

Registry Picker Preview

@sv/loaders

Retrieved manifest from @sv/loaders

Which items would you like to add?

Search:
[ ] dot-matrix // base components for all loaders
[ ] square-1
[ ] square-2
[ ] square-3
[ ] square-4
[ ] square-5
...

dot-matrix

installs the shared base components for every loader. After that, pick any square loader you want to bring into your project.

Install With shadcn-svelte

We use

shadcn-svelte

only for component distribution.

pnpm dlx shadcn-svelte@latest add https://sv-matrix.vercel.app/r/dot-matrix.json

Folder Structure

After installing

dot-matrix

and

square-1

, your project will be organized into a small loader entry point, shared runtime files, hooks, and one shared stylesheet.

Installed File Layout

src/lib

src/

└─ lib/

├─ components/

│ ├─ loaders/

│ │ └─ square-1.svelte // main component

│ └─ dot-matrix/ // shared runtime

│ ├─ dot-matrix.svelte

│ ├─ dot-matrix-base.svelte

│ ├─ geometry.ts

│ ├─ types.ts

│ └─ ...

├─ hooks/

│ └─ dot-matrix/ // hooks

│ ├─ index.ts

│ ├─ phase-controller.svelte.ts

│ ├─ reduced-motion.ts

│ └─ ...

└─ styles/

└─ dot-matrix.css // styles

Usage

Once setup is done, import the loader and render it anywhere you need a simple loading state.

Neon Drift Loader would be installed as

src/lib/components/loaders/square-1.svelte

.
You can tune props like

size

dotSize

, and

speed

and many more.