---
name: "@threecn"
slug: "threecn"
description: "3D scenes for shadcn/ui. Theme-aware React Three Fiber components, one command away."
category: "Charts/data viz"
tags: ["3d", "backgrounds", "cards", "charts", "maps", "theming"]
framework: "react"
license: "MIT"
author: "ln-dev7"
website: "https://threecn.dev"
github: "https://github.com/ln-dev7/threecn"
registry: "https://threecn.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 56
component_count: 28
generated_at: "2026-07-28T08:00:50.948Z"
---

# @threecn

3D scenes for shadcn/ui. Theme-aware React Three Fiber components, one command away.

## Links

- Website: https://threecn.dev
- GitHub: https://github.com/ln-dev7/threecn
- Registry JSON: https://threecn.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/threecn
- This file: https://sh4dcn.vercel.app/md/threecn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://threecn.dev/r/registry.json
pnpm dlx shadcn@latest add https://threecn.dev/r/registry.json
bunx shadcn@latest add https://threecn.dev/r/registry.json
# clone the source repo
git clone https://github.com/ln-dev7/threecn.git
# fetch the raw registry index
curl -s https://threecn.dev/r/registry.json
```

## Components (28)

| name | type | description | install |
| --- | --- | --- | --- |
| scene-container | registry:ui | Base R3F canvas wrapper with theme-aware environment and camera setup. | `npx shadcn@latest add https://threecn.dev/r/scene-container.json` |
| particle-field | registry:ui | A drifting cloud of particles colored with your shadcn --primary and --muted-foreground tokens. | `npx shadcn@latest add https://threecn.dev/r/particle-field.json` |
| product-viewer | registry:ui | An orbitable, polished product volume with an emissive --primary tint; hover slows the spin. | `npx shadcn@latest add https://threecn.dev/r/product-viewer.json` |
| floating-card-3d | registry:ui | A parallax-tilting 3D card with a --background surface, --border edges, and an HTML overlay. | `npx shadcn@latest add https://threecn.dev/r/floating-card-3d.json` |
| text-3d | registry:ui | Extruded, floating 3D text rendered with drei <Text3D>, colored with --primary. | `npx shadcn@latest add https://threecn.dev/r/text-3d.json` |
| product-showcase | registry:ui | A product on a circular pedestal with soft contact shadows, studio lighting and slow auto-rotate. | `npx shadcn@latest add https://threecn.dev/r/product-showcase.json` |
| globe | registry:ui | A dotted globe rotating slowly with orbit rings, colored with your --primary token. | `npx shadcn@latest add https://threecn.dev/r/globe.json` |
| wave-terrain | registry:ui | An undulating wireframe terrain in perspective, drawn with --primary. | `npx shadcn@latest add https://threecn.dev/r/wave-terrain.json` |
| crystal | registry:ui | A faceted glass gem with real refraction and a glowing core, tinted with --primary. | `npx shadcn@latest add https://threecn.dev/r/crystal.json` |
| halo | registry:ui | A glowing energy core wrapped by tilted orbit rings carrying satellites. | `npx shadcn@latest add https://threecn.dev/r/halo.json` |
| dna-helix | registry:ui | A rotating double helix of spheres joined by rungs, colored with --primary and --accent. | `npx shadcn@latest add https://threecn.dev/r/dna-helix.json` |
| vortex | registry:ui | A spiral galaxy of points fading from --primary at the core to --muted-foreground at the rim. | `npx shadcn@latest add https://threecn.dev/r/vortex.json` |
| aurora-ribbons | registry:ui | Silky aurora ribbons drifting in slow sine waves, shaded with a --primary → --accent gradient. | `npx shadcn@latest add https://threecn.dev/r/aurora-ribbons.json` |
| network-graph | registry:ui | A living plexus of drifting nodes that link up when close, fading from --primary to --muted-foreground. | `npx shadcn@latest add https://threecn.dev/r/network-graph.json` |
| metaballs | registry:ui | Liquid metaballs that merge and split as they orbit each other, tinted with --primary. | `npx shadcn@latest add https://threecn.dev/r/metaballs.json` |
| cube-wave | registry:ui | A grid of instanced cubes riding a radial wave, blending --accent troughs into --primary crests. | `npx shadcn@latest add https://threecn.dev/r/cube-wave.json` |
| iso-city | registry:ui | A procedural isometric skyline rotating under fog, with a few towers pulsing in --primary. | `npx shadcn@latest add https://threecn.dev/r/iso-city.json` |
| warp-tunnel | registry:ui | Hyperspace star streaks racing past the camera, from --foreground heads to --primary tails. | `npx shadcn@latest add https://threecn.dev/r/warp-tunnel.json` |
| phyllotaxis | registry:ui | A sunflower-style bloom of instanced petals placed by the golden angle, breathing from --primary at the core to --accent at the rim. | `npx shadcn@latest add https://threecn.dev/r/phyllotaxis.json` |
| strange-attractor | registry:ui | The Aizawa attractor integrated live into one glowing orbit that never repeats, colored --primary to --accent with a sweeping head. | `npx shadcn@latest add https://threecn.dev/r/strange-attractor.json` |
| curl-flow | registry:ui | Particles advected through a divergence-free curl-noise field into silky filaments, tinted --accent to --primary by height. | `npx shadcn@latest add https://threecn.dev/r/curl-flow.json` |
| cloth | registry:ui | A real spring-mass cloth (Verlet) hanging from its top edge and rippling under procedural wind, with the theme woven --primary to --accent. | `npx shadcn@latest add https://threecn.dev/r/cloth.json` |
| boids | registry:ui | A living flock steering by separation, alignment and cohesion; each agent tints --accent when slow to --primary at full speed. | `npx shadcn@latest add https://threecn.dev/r/boids.json` |
| voronoi-shatter | registry:ui | A sphere fractured into Voronoi shards that drift apart and snap back together, each facet shading --accent to --primary by height. | `npx shadcn@latest add https://threecn.dev/r/voronoi-shatter.json` |
| tesseract | registry:ui | 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. | `npx shadcn@latest add https://threecn.dev/r/tesseract.json` |
| pendulum-wave | registry:ui | A row of pendulums with stepped periods drifting into snakes, arches and chaos before snapping back in phase, bobs tinted --accent to --primary across the swin… | `npx shadcn@latest add https://threecn.dev/r/pendulum-wave.json` |
| pitch-momentum | registry:ui | A soccer pitch of dots where two rival particle mountains surge and clash as momentum swings, crests whitening where the fronts collide. | `npx shadcn@latest add https://threecn.dev/r/pitch-momentum.json` |
| world-cup | registry:ui | The World Cup trophy modeled procedurally: two sculpted figures with raised arms lift a continent-embossed globe above a green-banded base, turning under studi… | `npx shadcn@latest add https://threecn.dev/r/world-cup.json` |

## For AI agents

```text
You are adding components from @threecn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/threecn.md) for the component list.
2. Fetch the machine-readable index: https://threecn.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: threecn).
```