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.

Browse scenes View on GitHub

pnpm dlx shadcn@latest add @threecn/particle-field

Components

Ready-to-use 3D scenes

A few favorites below. Each scene is a single file plus the theme hook — install it with the shadcn CLI and its colors follow your design tokens.

PitchMomentum

A soccer pitch of dots where two rival particle mountains surge and clash as momentum swings, crests whitening where the fronts collide.

pnpm dlx shadcn@latest add @threecn/pitch-momentum

WorldCup

The World Cup trophy modeled procedurally: two sculpted figures with raised arms lift a continent-embossed globe above a green-banded base, turning under studio light amid a drift of confetti.

pnpm dlx shadcn@latest add @threecn/world-cup

Crystal

A faceted glass gem with real refraction and a glowing core, tinted with --primary.

pnpm dlx shadcn@latest add @threecn/crystal

Metaballs

A lava-lamp of liquid blobs that merge and split, surfaced with marching cubes and tinted --primary.

pnpm dlx shadcn@latest add @threecn/metaballs

WarpTunnel

Hyperspace star streaks racing past the camera, from --foreground heads to --primary tails.

pnpm dlx shadcn@latest add @threecn/warp-tunnel

Tesseract

A 4D hypercube in double rotation projected into 3D — the inner cell endlessly swells through the outer, struts shading --accent to --primary by 4D depth.

pnpm dlx shadcn@latest add @threecn/tesseract

See all 27 scenes

How it works

Three steps to themed 3D

Install

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

npx shadcn@latest add @threecn/particle-field

Use

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

app/page.tsx

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

Customize

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

Your tokens, in WebGL

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.

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