# Installation

How to install and use shadercn shader components.

> For the complete documentation index, see [llms.txt](/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](/.well-known/agent-skills/site-skill.md).



## Installing Components [#installing-components]

Install any shader component using the shadcn CLI:

```bash
npx shadcn@latest add https://shadercn.vercel.app/r/component-name.json
```

## Using a Component [#using-a-component]

After installation, import it from your UI folder:

```tsx
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 [#customizing-props]

Every shader component exposes its visual parameters as props:

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

## Adding to Your Project [#adding-to-your-project]

### 1. Install dependencies [#1-install-dependencies]

```bash
pnpm add vgpu
pnpm add -D @webgpu/types
```

### 2. Install the component [#2-install-the-component]

```bash
npx shadcn@latest add https://shadercn.vercel.app/r/component-name.json
```

### 3. Use it [#3-use-it]

```tsx
import { ShaderComponent } from "@/components/ui/shader-component";

export function MyPage() {
  return <ShaderComponent />;
}
```