# Shaders for WebGPU components in React, Vue, Svelte and Solid

> The shaders package provides a declarative component API for WebGPU effects across React, Vue, Svelte, Solid and JavaScript. It includes a visual editor, CLI and agent integrations, but its adoption depends on the application's WebGPU support and shader integration needs.

**shader-effects-inc/shaders** — WebGPU components for React, Vue, Svelte, Solid, JS & Framer

- Repository: https://github.com/shader-effects-inc/shaders
- Website: https://shaders.com
- Stars: 5,365 · Forks: 244
- Language: TypeScript
- License: MIT
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/shader-effects-inc-shaders

## Shaders turns WebGPU effects into framework components

Shaders is a TypeScript library for developers who want browser-rendered visual effects without implementing each WebGPU shader integration from scratch. The README describes more than 200 effects, including gradients, noise, glass, metal, lighting, distortions, transitions, blurs and cursor effects. The intended users are front-end teams and design engineers who want these effects to remain within the component structure of their application.

React, Vue, Svelte and Solid receive declarative components. JavaScript receives an imperative `createShader` API. This makes the library relevant to teams maintaining several front-end stacks, since the documented framework examples use the same component names and props. It is also useful to individual applications that already use WebGPU but do not want to spend development time assembling common visual effects.

Shaders is not a general-purpose rendering engine or a replacement for every CSS technique. The README documents effects rendered through WebGPU and composed as component layers. A static gradient, simple background treatment or interface decoration may remain better served by CSS because those approaches do not require a canvas and GPU shader pipeline.

## Shader layers are composed and blended from top to bottom

The central component is `<Shader>`. According to the README, it renders a canvas, while its child components form layers. Those layers are evaluated from top to bottom and blended on the GPU. This creates a tree-shaped rendering model in which an application can nest effects, blend them, mask them and update typed props.

A React example places `LinearGradient` and `CursorTrail` beneath `Shader`. The gradient receives the colors `#0f172a` and `#7c3aed`, while the cursor layer reacts to pointer activity. The canvas itself uses `className="w-full h-64"`, so the host application must supply the CSS environment that interprets those class names.

The README states that the package provides reactive prop updates and is SSR safe. It does not document the internal shader compilation sequence, texture management, device-loss behavior or fallback renderer. The repository layout shows a pnpm monorepo with framework packages under `packages/`, shared graphics keywords, and a root test script that targets `shaders-core`. Those details indicate a shared core and package separation, but the README remains the documented source for the public component behavior.

## Installing Shaders and rendering a first React effect

The README gives npm as the installation route for application projects. Install the public package inside the project that needs the component:

```bash
npm install shaders
```

For a React application, import the components from `shaders/react`. The following first use renders a canvas containing a linear gradient and a cursor trail:

```jsx
import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>
```

The application should display a full-width canvas with a height corresponding to `h-64`. The two child components represent separate GPU layers according to the README.

Vue, Svelte and Solid use the same documented components through `shaders/vue`, `shaders/svelte` and `shaders/solid`. JavaScript can mount the same effect model imperatively:

```javascript
import { createShader } from 'shaders/js'

await createShader(document.getElementById('my-shader'), {
  components: [
    { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },
    { type: 'CursorTrail' },
  ],
})
```

This call expects an existing element with the `my-shader` id. The README does not give a project-specific development server command, so the host application's normal framework tooling must start and display the example.

## The design editor and CLI keep installed effects connected

The design editor at `shaders.com/design-editor` is documented as an infinite canvas for stacking shader components and adjusting their props through visual controls. Users can drive props from the cursor or a timeline, inspect the result and export the component tree for the selected framework. The README says that design and export are free with an account and that projects are saved so they can be reopened.

The CLI connects that editor workflow to a local codebase. Its guided setup finds presets and opens the editor, while separate commands connect a project, install shaders, search the library, preview a named preset and update previously installed files:

```bash
npx shaders
npx shaders connect
npx shaders install
npx shaders search "..."
npx shaders preview <name>
npx shaders update
```

The README says the CLI detects the framework, writes selected effects to the application's components folder and records installed items in a lock file. Nothing needs to be installed globally because the examples invoke it through `npx`. The lock file also gives the team a record for reviewing what the workflow changed.

The README does not identify that lock file's exact name or explain what happens when an installed component has been edited locally. A team using `npx shaders update` should therefore inspect its generated changes and resolve conflicts under the CLI's documented behavior rather than assuming automatic reconciliation.

## Shaders supplies an agent skill and MCP installation path

The package documents two ways to expose Shaders workflows to coding agents. The first is an agent skill that explains the component library, layer composition and CLI process. It can be added with either of these documented commands:

```bash
npx shaders skill
npx skills add shader-effects-inc/shaders
```

The corresponding repository file is `skills/shaders/SKILL.md`. The README also says that `npx shaders connect` adds the skill for the connected codebase. This gives an agent component-specific guidance instead of asking it to invent an unrelated canvas implementation.

The second route is an MCP server:

```bash
npx shaders@latest install-mcp
```

According to the README, this command configures Claude Code, Cursor, Codex, Windsurf and Copilot, along with other supported agents. The agent can then find, install and edit effects associated with the editor workflow. This is particularly relevant to applications that already use an agent for source changes, because the agent receives the library's component and CLI conventions.

The README does not document how generated edits handle unsupported browsers, component syntax errors or conflicts with local source changes. Agent access should therefore be paired with the application's existing source control and build checks rather than accepted as a substitute for them.

## WebGPU support, Pro features and the limits of the documentation

Shaders describes its rendering technology as WebGPU. Its workspace metadata includes `webgpu`, `wgsl`, `webgl` and `glsl` as keywords, but the README identifies the product itself as a real WebGPU component library. Browser and device support are therefore central constraints. The README states that the package is SSR safe, yet it does not document a WebGL fallback, behavior when `navigator.gpu` is unavailable, or a reduced-motion policy.

An application must verify WebGPU behavior on its actual target devices. That check matters for pointer effects, animated shaders and pages combining canvases with other GPU-heavy work. The documentation establishes that effects run on the GPU, but it does not provide performance measurements, frame-rate guarantees or guidance for tuning many simultaneous layers. Those points require evaluation in the host application.

The free offering includes the component package, visual design and export, CLI workflow, agent skill and MCP setup. Pro adds more than 1,000 production-ready presets, more than 55 website sections, HD video and image rendering without a watermark, one-click Framer installation, unlimited editor version history, access to Pro presets through the CLI and MCP, Discord benefits and priority support. This distinction matters when an organization decides whether the code dependency alone is sufficient or whether the hosted service and preset library are part of the intended adoption.

Compared with implementing WGSL and WebGPU integration directly, Shaders supplies ready-made effects, reusable components and typed props. Compared with a CSS visual layer, it offers rendering constructs such as distortion, noise, glass and cursor effects through a canvas. The trade-off is dependence on WebGPU runtime behavior and, for editor-managed assets, an account-linked update workflow.

## Release activity and MIT licensing for Shaders users

The repository is not archived. Its last push was on 2026-10-09, and the release list includes v4.0.4 on 2026-10-09, v4.0.3 on 2026-10-08 and v4.0.2 on 2026-10-07. These dates show recent project activity around version 4, but they do not establish compatibility with every supported framework or browser. The root workspace specifies Node.js `22.20.x` and pnpm `10.0.0`; these engine declarations apply to the repository workspace and should not be confused with a separately documented browser support matrix.

Shaders uses the MIT license. The repository includes a `LICENSE` file, and the README identifies MIT licensing. MIT permits use, modification, distribution and sublicensing subject to its conditions, including retaining the copyright and license notice. This review does not give legal advice or determine whether a particular distribution meets an organization's compliance policy.

Upgrade planning should account for two layers of maintenance. Application developers manage the npm dependency and test the generated effects in supported browsers. Teams that install editor assets through the CLI must also review lock-file changes and distinguish source-code changes from hosted Pro preset or service features.

## Conclusion

Adopt Shaders when a front-end team wants declarative WebGPU effects, framework-specific entry points and an editor-to-code workflow. Do not make it the only visual layer when WebGPU availability has not been verified. Check the target browsers, SSR behavior, generated component output, CLI lock file and release compatibility before integrating v4.0.4.

## FAQ

### How do I install Shaders in a React project?

Run `npm install shaders`, then import the desired components from `shaders/react`. The README nests `LinearGradient` and `CursorTrail` inside `<Shader>` as a first example.

### Which frameworks and JavaScript APIs does Shaders support?

The README documents React, Vue, Svelte and Solid entry points. It also documents `createShader` from `shaders/js` for applications that prefer an imperative JavaScript setup.

### What does the Shaders CLI install into a project?

The CLI detects the framework and writes selected shader components to its components folder. It also records installed shaders in a lock file and can update components from a connected editor project.

### Does Shaders document a fallback for browsers without WebGPU?

No. The README describes real WebGPU rendering and SSR safety but does not document a WebGL fallback or behavior when WebGPU is unavailable. Verify the target browsers and devices before adoption.

## Sources

- [License: MIT](https://github.com/shader-effects-inc/shaders/blob/main/LICENSE)
- [Project website](https://shaders.com)
- [README](https://github.com/shader-effects-inc/shaders/blob/main/README.md)
- [Releases](https://github.com/shader-effects-inc/shaders/releases)
- [shader-effects-inc/shaders on GitHub](https://github.com/shader-effects-inc/shaders)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/shader-effects-inc-shaders