# Introduction

A shadcn registry of GPU-powered shader components for React, built on vgpu.

> 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).



A **shadcn registry** of GPU-powered shader components for React. Built on [vgpu](https://vgpu.labs.vercel.dev/), the modular cross-runtime WebGPU library.

## What Is shadercn? [#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 [#tech-stack]

* [vgpu](https://vgpu.labs.vercel.dev/) — WebGPU shader runtime
* `Next.js 16` + App Router
* `React 19`
* `Tailwind CSS 4`
* `Fumadocs` for documentation
* `shadcn/ui` compatible registry

## How It Works [#how-it-works]

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

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

## FAQ [#faq]

<Accordion type="multiple">
  <AccordionItem value="faq-1">
    <AccordionTrigger>
      What is vgpu?
    </AccordionTrigger>

    <AccordionContent>
      [vgpu](https://vgpu.labs.vercel.dev/) is a modular cross-runtime WebGPU library for shaders, 3D scenes, GPU tensors, neural networks, and math viz. It provides typed WGSL imports, a tiny gpu-first API, and the same code running in the browser, headless Node, and test suites.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-2">
    <AccordionTrigger>
      Which frameworks are supported?
    </AccordionTrigger>

    <AccordionContent>
      Any React framework: Next.js, Remix, Astro, Gatsby, Vite, etc.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="faq-3">
    <AccordionTrigger>
      Do shaders work without WebGPU?
    </AccordionTrigger>

    <AccordionContent>
      vgpu includes a mock adapter (`vgpu/mock`) for testing. For browsers without WebGPU support, you should provide a fallback. Check [vgpu docs](https://vgpu.labs.vercel.dev/docs) for details.
    </AccordionContent>
  </AccordionItem>
</Accordion>