For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
/
0
Sponsor

Installation

PreviousNext

How to install and use shadercn shader components.

Installing Components

Install any shader component using the shadcn CLI:

$ pnpm dlx shadcn@latest add https://shadercn.vercel.app/r/component-name.json

Using a Component

After installation, import it from your UI folder:

import { ShaderBackground } from "@/components/ui/shader-background";
 
export function Hero() {
  return (
    <div className="relative h-screen">
      <ShaderBackground className="absolute inset-0" />
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </div>
  );
}

Customizing Props

Every shader component exposes its visual parameters as props:

<ShaderBackground
  speed={0.5}
  color1="#ff0000"
  color2="#0000ff"
  intensity={0.8}
/>

Adding to Your Project

1. Install dependencies

pnpm add vgpu
pnpm add -D @webgpu/types

2. Install the component

$ pnpm dlx shadcn@latest add https://shadercn.vercel.app/r/component-name.json

3. Use it

import { ShaderComponent } from "@/components/ui/shader-component";
 
export function MyPage() {
  return <ShaderComponent />;
}