Get up and running with Shaderz in minutes. Beautiful WebGL shader components you can drop into any React or Next.js project.

Step 1: Install the Package

npm install shaderz

yarn add shaderz

pnpm add shaderz

Step 2: Install Required Dependencies

Most WebGL shaders require three.js and related packages:

npm install three @types/three @react-three/fiber framer-motion

Note: Some shaders (like Gradient Blinds) use ogl instead. Check the individual shader page for exact dependencies.

Step 3: Add a Shader Component

Use the interactive CLI to pick and add a shader to your project:

npx shaderz add

This will prompt you to select a shader. Once selected, the component files will be added to your /components/shaderz folder automatically.

You can also specify a shader directly:

npx shaderz add gradient-waves

Step 4: Use as a Hero Background

The most common use case — a full-screen shader behind your hero content.

Key idea: Position the shader with absolute inset-0 inside a relative container, and layer your content on top with z-index.

import GradientWavesShader from '@/components/shaderz/GradientWavesShader';

export default function Home() {
  return (
    <section className="relative min-h-screen overflow-hidden">
      {/* Shader background layer */}
      <div className="absolute inset-0 z-0">
        <GradientWavesShader />
      </div>

      {/* Your content layer */}
      <div className="relative z-10 flex items-center justify-center min-h-screen">
        <h1 className="text-6xl font-bold text-white">
          Welcome to Your Site
        </h1>
      </div>
    </section>
  );
}

⚠️ Common mistake: Don't wrap the shader in a fixed-height container like style={{ height: '500px' }} if you want it as a full-screen background. Use absolute inset-0 instead — this stretches it to fill its parent.

Step 5: Use as a Contained Preview (Optional)

If you just want the shader in a box (e.g., in a card or gallery), wrap it in a container with explicit dimensions:

import GradientWavesShader from '@/components/shaderz/GradientWavesShader';

export default function ShaderPreview() {
  return (
    <div style={{ width: '100%', height: '400px' }}>
      <GradientWavesShader />
    </div>
  );
}

That's it! 🚀

Browse the Components section in the sidebar to explore all available shaders, preview them live, and copy the code.