Introduction

A shadcn registry of GPU-powered shader components for React. Built on vgpu, the modular cross-runtime WebGPU library.

What Is shadercn?

shadercn provides shader effects as React components. Instead of writing WGSL directly, you work with GPU effects as components that you can drop into your app, pass props to, and compose together.

• Fragment shaders as components — Each shader is a React component with typed props
• GPU-accelerated — Runs on the GPU via WebGPU for smooth 60fps performance
• Copy-paste — Install via npx shadcn add, own the code forever
• Customizable — Every visual parameter is exposed as a prop

Tech Stack

• vgpu — WebGPU shader runtime
• Next.js 16 + App Router
• React 19
• Tailwind CSS 4
• Fumadocs for documentation
• shadcn/ui compatible registry

How It Works

1. Browse the available shader components
2. Install with the shadcn CLI
3. Import and use in your React app

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

FAQ