3D UI Components

A shadcn-style component library for 3D primitives built with React Three Fiber.

Introduction

3D UI is a collection of beautifully designed, accessible 3D components that you can copy and paste into your apps. The components follow the shadcn/ui pattern with variants, sizes, and full customization support.

Features

• Variant System - Each component supports default, primary, secondary, destructive, outline, and ghost variants.
• Size Options - Small, default, and large sizes for flexible layouts.
• Animation Support - Built-in rotation animations with customizable speed.
• Material Control - Adjust metalness, roughness, and wireframe rendering.
• TypeScript - Full type safety with exported prop interfaces.

Quick Start

Install the required dependencies and start using 3D components in your React app.

npm install @react-three/fiber @react-three/drei three
npm install class-variance-authority clsx tailwind-merge

Basic Usage

import { Scene, Cube, Sphere } from "@3d-ui/components"

export function MyScene() {
  return (
    <Scene backgroundColor="#fafafa" environment="studio">
      <Cube 
        variant="primary" 
        size="lg" 
        animate 
        position={[-1.5, 0, 0]} 
      />
      <Sphere 
        variant="secondary" 
        animate 
        position={[1.5, 0, 0]} 
      />
    </Scene>
  )
}