Model Viewer: React + Tailwind Component

A low-poly 3D model orbit viewer: drag to rotate freely, release for momentum, with automatic rotation and live directional lighting. A pure canvas 2D projection simulation — no WebGL, no external dependencies.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/model-viewer.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Modelmodel

Model colorcolor

Wireframewireframe

Auto-rotateautoRotate

Rotation speed (degrees/s)autoRotateSpeed

Contact shadowfloor

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<ModelViewer/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/model-viewer.en.json?t=<install token>"

Or, once registries are configured in components.json, install it as @webberui/model-viewer.

Usage

import { ModelViewer } from "@/components/ui/model-viewer";

<ModelViewer model="icosahedron" color="#818cf8" className="h-[320px] w-full" />

model can be icosahedron, cube, octahedron, or torus. The container must supply an explicit height of its own (for example h-[320px]).

Props

Prop	Type	Default	Description
`model`	`"icosahedron" \| "cube" \| "octahedron" \| "torus"`	`"icosahedron"`	Built-in geometry
`color`	`string`	`"#818cf8"`	Main model color (hexadecimal); face shading modulates the light and dark of this color
`wireframe`	`boolean`	`false`	Wireframe mode: strokes only, no fill
`autoRotate`	`boolean`	`true`	Whether to rotate automatically around the Y axis
`autoRotateSpeed`	`number`	`26`	Automatic rotation speed (degrees/second)
`interactive`	`boolean`	`true`	Allow dragging to orbit, with momentum after release
`ambient`	`number`	`0.32`	Ambient light ratio (`0`–`1`); higher is brighter overall with weaker contrast
`floor`	`boolean`	`true`	Draw a soft contact shadow beneath the model

Accessibility

When the user has "reduce motion" enabled at the system level, automatic rotation and dragging are disabled and a single static frame renders at the default angle
The canvas is marked aria-hidden — a purely decorative layer, so it does not interfere with assistive technology

Model Viewer