Installation

Learn how to add PixelPlanet components to your React project. Because PixelPlanet is hosted on a custom registry, you have two ways to install it using the shadcn CLI.

Prerequisites

Before installing, ensure your project meets these requirements:

• React: A React-based project (e.g., Next.js, Vite).
• React Three Fiber: Install @react-three/fiber and three to render the 3D components.

pnpmnpmyarnbundeno

npm install @react-three/fiber three

• Tailwind CSS: The components use Tailwind for positioning and styling.

Add components

The most reliable way to install a component from a custom third-party registry without modifying your project configuration is to use the absolute URL to the component’s generated JSON definition.

Run the following command in your terminal:

pnpmnpmyarnbundeno

npx shadcn@latest add https://pixel-planet.vercel.app/r/pixel-planet.json

This commands the CLI to fetch the component’s code and dependencies directly from the repository’s build output folder (/r).