threecn

Overview

threecn is a collection of copy-paste React Three Fiber scenes that adapt automatically to a shadcn/ui theme, including dark mode. Each scene is a single file plus a useShadcnTheme hook, installed with the shadcn CLI, and needs no Three.js expertise to drop into a page.

The registry lists 28 items and the site shows 27 scenes, from particle fields and globes to generative pieces such as a tesseract, strange attractor, boids and Voronoi shatter. Scenes read CSS variables such as --primary, --accent and --foreground, so changing the accent color or toggling dark mode recolors every scene without rewiring props.

Features

• Theme bridge: The useShadcnTheme hook exposes values like primaryColor and isDark to WebGL.
• Product scenes: Product viewer, product showcase, floating 3D card and 3D text.
• Backgrounds: Particle field, wave terrain, aurora ribbons, warp tunnel, vortex and cube wave.
• Generative pieces: Tesseract, strange attractor, phyllotaxis, curl flow, boids, cloth, metaballs and pendulum wave.
• Objects: A refractive crystal, globe, DNA helix, halo, network graph and isometric city.
• Sports scenes: Pitch Momentum, a dot-based soccer pitch, and a procedurally modeled World Cup trophy.
• Simple usage: Render a scene like any component, for example <ParticleField className="h-64 rounded-lg" />.

Tech stack

• React, shadcn/ui
• Three.js, React Three Fiber, Drei

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @threecn/component-name