Getting Started

Blocks can be installed in any React project with Tailwind v4. You can use them with Next.js, Vite, or any other React framework.

You can install them via NPM or shadcn’s CLI.

Shadcn

The recommended way to install Blocks is using Shadcn’s CLI. Each Block can be installed individually which will add the block to your project.


npx shadcn@latest add https://playcanvas-react.vercel.app/r/splat-viewer.json

Alternatively, you can simply install the package from npm, yarn, pnpm or bun and import the components you need.

Grab the package from npm, yarn, pnpm or bun.


npm i @playcanvas/blocks


yarn add @playcanvas/blocks


pnpm add @playcanvas/blocks


bun add @playcanvas/blocks

PlayCanvas Blocks are built with Tailwind v4. You’ll need to install Tailwind to get started.

Follow the official Tailwind CSS installation guide for your project.


npm i tailwindcss


yarn add tailwindcss


pnpm add tailwindcss


bun add tailwindcss

Add the following to your index.css file. This ensures that the block is processed by Tailwind.


@source '../node_modules/@playcanvas/blocks';