3D scenes for shadcn/ui.
One command away.

Copy-paste React Three Fiber scenes that auto-adapt to your shadcn theme. Dark mode included. Zero Three.js expertise required.

npx shadcn add https://threecn.dev/r/particle-field.json

Components

Ready-to-use 3D scenes

Each scene is a single file plus the theme hook. Install it with the shadcn CLI and drop it in — colors follow your design tokens.

The themed canvas wrapper every scene builds on: DPR, camera, lighting rig and fog.

npx shadcn add https://threecn.dev/r/scene-container.json

A drifting cloud of particles colored with --primary and --muted-foreground.

npx shadcn add https://threecn.dev/r/particle-field.json

A polished rounded volume with orbit controls; hover slows the spin. Emissive --primary tint.

npx shadcn add https://threecn.dev/r/product-viewer.json

A card that tilts toward the cursor with spring smoothing. --background surface, --border edges.

npx shadcn add https://threecn.dev/r/floating-card-3d.json

Extruded, slowly floating 3D text using drei <Text3D>, colored with --primary.

npx shadcn add https://threecn.dev/r/text-3d.json

A product on a circular pedestal under soft contact shadows and studio lighting.

npx shadcn add https://threecn.dev/r/product-showcase.json

A dotted globe rotating slowly with orbit rings, colored with --primary.

npx shadcn add https://threecn.dev/r/globe.json

An undulating wireframe terrain in perspective, drawn with --primary.

npx shadcn add https://threecn.dev/r/wave-terrain.json

A drifting cluster of low-poly shapes that float and react to the pointer.

npx shadcn add https://threecn.dev/r/floating-shapes.json

How it works

Add any scene with the shadcn CLI. The scene file and the useShadcnTheme hook land in your project.

npx shadcn add https://threecn.dev/r/particle-field.json

Render it like any component. Set the height on the wrapper and you're done.

app/page.tsx

<ParticleField className="h-64 rounded-lg" />

Scenes read your CSS variables. Change --primary and every scene follows — light or dark.

globals.css + scene

:root {
  --primary: 263 70% 50%;
}

/* the scene re-colors itself automatically */
const { primaryColor, isDark } = useShadcnTheme()

The bridge

Flip the theme or swap the accent. The scene re-reads your CSS variables through useShadcnTheme and recolors instantly — no props rewired.

--primary → #c199f1|dark

Mode

Accent (--primary)

Tip: press d anywhere to toggle dark mode.