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.
/
140
Sponsor

Installation

PreviousNext

Install GPU shader components from the registry.

Prerequisites

A React project with WebGPU support. shadercn components use vgpu as the shader runtime and TypeGPU for type-safe GPU compute.

Installation

Run the following command to add a shader component:

$ pnpm dlx shadcn@latest add @shadercn/orb-01

Without a registry alias, use the full URL:

$ pnpm dlx shadcn@latest add https://shadercn.run/r/orb-01.json

The registry installs the matching vgpu runtime and any required dependencies.

Usage

Import the installed component and use it in your React app:

import { OrbPreview } from "@/components/ui/orb-01";
 
export function Hero() {
  return (
    <div className="relative h-screen">
      <OrbPreview 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:

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

Adding to Your Project

1. Install dependencies

pnpm add vgpu typegpu
pnpm add -D @webgpu/types

2. Install the component

$ pnpm dlx shadcn@latest add @shadercn/orb-01

3. Use it

import { OrbPreview } from "@/components/ui/orb-01";
 
export function MyPage() {
  return <OrbPreview />;
}