Installation

How to install and set up the 3D UI component library.

Prerequisites

Before you begin, make sure you have a React 18+ project set up. The library works with Next.js, Vite, Create React App, or any React framework.

Install Dependencies

Install React Three Fiber and its peer dependencies:

bash

npm install @react-three/fiber @react-three/drei three

Install the styling utilities used by the components:

bash

npm install class-variance-authority clsx tailwind-merge

TypeScript Support

For TypeScript projects, install the Three.js type definitions:

bash

npm install -D @types/three

Copy Components

Copy the components you need from the documentation into your project. Each component is self-contained and can be used independently.

bash

# Create the 3D components directory
mkdir -p components/3d

# Copy the components you need
# - scene.tsx (required for all components)
# - cube.tsx
# - sphere.tsx
# - cylinder.tsx
# - torus.tsx
# - cone.tsx

Next.js Configuration

If you are using Next.js, you may need to configure transpilation for the Three.js packages in your next.config.js:

javascript

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["three"],
}

module.exports = nextConfig