Product Variants

@sushindustries/react-product-viewer

One model, several configurations, switched without reloading the asset - the GLB already holds them.

4 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/product-variants.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/product-variants.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Something } from "@sushindustries/ui";

export function Page() {
	return (
		<main className="container section">
			<Something />
		</main>
	);
}
tsx

What this example is not

Whatever the example quietly assumes: a fixed height, a parent that scrolls, a route that exists. Say it, so nobody copies the example and gets the assumption without it.

Uses@sushindustries/product-viewer@sushindustries/product-viewerRuntime material swapping and geometric zone tinting for a single GLB product. Framework-free.package