Skratch

WebGPU components, installed like source.

One command copies a vgpu React component into your repo — TypeScript, WGSL shaders, mesh binaries, and matcap textures. Not a black-box package. You own the files.

Live catalog →

Install

npx ui-scratch@latest add rubiks-cube

rubiks-cube is just an example. See the catalog for every component.

That’s it. No config file. No --registry. The CLI fetches from skratch.design and writes into your project.

Then import what landed:

import RubiksCube from './components/gpu/rubiks-cube/RubiksCube'

export function Example() {
  return (
    <div className="relative h-[550px] w-full">
      <RubiksCube />
    </div>
  )
}

Why this exists

Text-only registries stop at .tsx. GPU components need .wgsl, .bin, and textures, byte-for-byte. Skratch inlines those assets in the registry and restores them on disk.

You get the same “copy the source, it’s yours” model as shadcn — built for WebGPU.

Commands

npx ui-scratch@latest add <component...>   # copy source + assets, install deps
npx ui-scratch@latest list                 # what’s in the catalog
npx ui-scratch@latest help

Options:
  --cwd <dir>     project directory (default: current)
  --force         overwrite files that already exist
  --no-install    skip npm / pnpm / yarn / bun

Vite

WGSL has to compile. Add the vgpu plugin to vite.config:

import { wgslVitePlugin } from '@vgpu/wgsl/loader-vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [wgslVitePlugin()],
})

add already installs vgpu, @vgpu/wgsl-std, and @vgpu/wgsl when the component needs them.

Catalog

Browse components and copy the same install line from the site:

www.skratch.design

License

MIT © Mauro Garcia