DocumentationInstallation

Installation

There are two ways to install Pixel shader components: using the shadcn CLI (recommended) or manual installation.

Method 1: shadcn CLI (Recommended)

The easiest way to add a shader component is using the shadcn CLI. This handles dependencies and places the component in your project automatically.

$ pnpm dlx shadcn add https://pixel.devsethi.site/r/ocean-wave.json

This will install the required dependencies and create the component file at components/shaders/ocean-wave.tsx.

Method 2: Manual Installation

1

Install dependencies

All shader components require the Paper Design shaders library. Install it using your package manager:

$ pnpm add @paper-design/shaders-react
2

Copy the component

Browse the shader documentation and copy the component code into your project. Each shader doc includes a full copy-paste component.

3

Import and use

Import the component and wrap your content with it. It will fill the parent container by default.

import OceanWave from "@/components/shaders/ocean-wave"export default function Page(): JSX.Element {  return (    <OceanWave className="min-h-screen">      <YourContent />    </OceanWave>  )}

Project Structure

After installation, your project will include shader components in the following structure:

Project Structure
your-project/
├── components/
│   └── shaders/
│       ├── ocean-wave.tsx
│       ├── sunset-glow.tsx
│       └── ...
├── package.json
└── ...