Skip to content
Pixel Planet
Menu
DocsComponentsContributing
Getting started
IntroductionInstallation
Components
PixelPlanet
Contributing
IntroductionFeature requestContribute code

Installation

Learn how to add Pixel Planet components to your React project.

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

Section titled “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.
npm install @react-three/fiber three
  • Tailwind CSS: The components use Tailwind for positioning and styling.

Add components

Section titled “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:

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

This commands the CLI to fetch the component definitions from the registry JSON endpoint.