The runtime works. The install does not exist yet.
Everything on this page is the intended install surface, written down before it exists so it can be argued with while changing it is still cheap. The runtime and seventeen components are real and run in the playground today; the distribution around them is not.
Two steps, and a third that only checks.
npm i @gpu-components/core @gpu-components/reactThe runtime — versioned, upgradeable, not yours to fork.
npx gpu-components add timelineThe component — copied into your repo, yours to edit.
npx gpu-components doctorChecks bundler config, the WGSL loader, and WebGPU availability.
The split is the whole distribution thesis: the runtime is infrastructure you want patched, the component is policy you want to change. doctor exists because the WGSL loader is the one piece of setup that fails silently — a missing loader looks like a broken component rather than a missing build step.
import { GPUProvider } from '@gpu-components/react'
import { GPUTimeline } from '@/components/gpu/timeline'
export function Trace({ spans, tracks }) {
return (
<GPUProvider fallback="canvas2d">
<GPUTimeline
spans={spans}
tracks={tracks}
onSelectionChange={setSelected}
aria-label="Request trace"
/>
</GPUProvider>
);
}Note what is absent: no shader prop, no uniforms prop, no renderer prop. Extensibility for GPU experts comes from owning the copied source, not from a configuration escape hatch — which keeps the props surface small and honest.
Objects are ergonomic. Columns are what scales.
Both are accepted. The docs will state the conversion cost of the ergonomic one rather than quietly paying it for you.
// fine up to ~100k. Conversion cost is documented.
const spans: Span[] = [
{ start: 0, dur: 12.4, track: 0, name: 'fetchUser' },
…
];// the fast path — zero copy from a worker
const spans: ColumnarSpans = {
start: new Float64Array(n),
dur: new Float64Array(n),
track: new Uint16Array(n),
category: new Uint8Array(n),
id: new Uint32Array(n),
};What you will need.
A WebGPU browser, or not
WebGPU reached Baseline in January 2026, per the Baseline browser-support data. The fallback population is realistically under ten per cent — Linux Firefox, older iOS devices, locked-down enterprise browsers — though we have not measured that ourselves. The Canvas2D fallback covers them at reduced capacity and says so out loud.
A bundler with the vgpu WGSL loader
Vite, webpack, or Turbopack. Shaders are build-time artefacts — resolved, tree-shaken, validated and source-mapped by vgpu’s loader. `doctor` prints the exact config to add if it is missing.
React 18+
For now. core is framework-free by CI enforcement, so Vue and Svelte adapters are ~200 lines each. We ship none of them in v1 — the discipline of keeping core React-free is the entire preparation.
Read the part that tells you not to.
Every component page will carry a “When NOT to use this” section with a measured crossover number and a recommendation for what to use instead.
Below the crossover, use something else
Upload cost and pipeline overhead dominate at small N. The hypothesis is somewhere around 20k–50k primitives; the measured number goes in the docs. A library that teaches you to reach for the GPU at 500 rows is a worse library than one that tells you to use a <table>.
Accessibility is not an afterthought here
Labels are real DOM text — selectable, copyable, and screen-reader navigable — and that same layer is the accessibility tree. Keyboard navigation moves the viewport, not just the focus ring, so a keyboard user reaches the whole dataset rather than only what happens to be on screen.