Installation

Prerequisites

threecn assumes a typical shadcn/ui setup:

• A Next.js (or any React) app with Tailwind CSS v4.
• shadcn/ui initialized (npx shadcn init) with CSS variables enabled.
• Your theme uses standard tokens: --primary, --background, --border, --muted-foreground, --accent.

The 3D peer dependencies (three, @react-three/fiber, @react-three/drei) are installed automatically by the CLI.

Install a single scene

threecn is published in the shadcn registry under the @threecn namespace, so you can add any scene by name — no long URLs:

npx shadcn@latest add @threecn/particle-field

This drops two files into your project:

• components/threecn/particle-field.tsx — the scene.
• components/hooks/use-shadcn-theme.ts — the theme bridge (shared by all scenes, installed once).

Install everything

Run the add command for each scene you want:

npx shadcn@latest add @threecn/scene-container
npx shadcn@latest add @threecn/particle-field
npx shadcn@latest add @threecn/product-viewer
npx shadcn@latest add @threecn/floating-card-3d
npx shadcn@latest add @threecn/text-3d
npx shadcn@latest add @threecn/product-showcase

The hook is only written once — subsequent installs reuse it.

Use it

import { ParticleField } from "@/components/threecn/particle-field"

export default function Page() {
  return <ParticleField className="h-64 rounded-lg" />
}

Set the height on the wrapper via className. That's it — the scene reads your theme automatically. Head to Theming to learn how.