Introducing 3D UI

Beautiful 3D Components for React

A shadcn-style component library for 3D primitives. Built with React Three Fiber, designed for modern web applications.

TypeScript Ready
Fully Customizable

Component Library

Five beautiful 3D primitives with variants, sizes, and full customization support.

Cube

3D cube primitive

Sphere

3D sphere primitive

Cylinder

3D cylinder primitive

Torus

3D torus primitive

Cone

3D cone primitive

Scene

Container with lighting and controls

Why 3D UI?

Built with the same principles as shadcn/ui - copy and paste, fully customizable.

Variant System

Default, primary, secondary, and destructive variants out of the box.

Full Customization

Adjust colors, metalness, roughness, and more with simple props.

TypeScript First

Full type safety with exported interfaces for all component props.

Animation Ready

Built-in rotation animations with customizable speed controls.

Simple, Intuitive API

Import the components you need and start building. The API follows familiar React patterns with props for variants, sizes, and customization.

Read the Docs
scene.tsx
import { Scene, Cube, Sphere } from "@3d-ui/components"

export function MyScene() {
  return (
    <Scene 
      backgroundColor="#0a0a0a" 
      environment="city"
    >
      <Cube 
        variant="primary" 
        size="lg" 
        animate 
        position={[-1.5, 0, 0]} 
      />
      <Sphere 
        color="#06b6d4" 
        animate 
        metalness={0.3}
        roughness={0.2}
      />
    </Scene>
  )
}

Ready to build in 3D?

Get started with 3D UI today. Copy the components, customize them, and ship beautiful 3D experiences.

Get Started