Product Viewer

Below is the real component, loading the real asset — the Sushindustries mark, reconstructed from a 500,000-triangle scan and decimated to 40,000, with four finishes authored into the GLB.

Drag it.

That is not a screenshot and not a video. It is the component this page documents, mounted from the same package you would install, which is why it cannot go out of date.

Why it is built for TanStack

Two optional entry points, and both of them are the reason this exists rather than another <model-viewer> wrapper:

// Query owns the asset, so a route loader preloads it — on hover, under
// defaultPreload: "intent" — and cache eviction actually frees the GPU.
import { productModelOptions } from "@sushindustries/react-product-viewer/query";

// Router owns the selection, so a configured product is a URL you can send.
import { useVariantSearch } from "@sushindustries/react-product-viewer/router";

If Query owns the GLB, the model is in memory before the route renders. If Router owns the selection, "the mark, in white" is a link.

Install

tanstack add https://adamjurek.com/r/tanstack/product-viewer.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/product-viewer.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get