# Shaders

Component library for creative WebGPU effects — 100+ ready-to-use shaders for React, Vue, Svelte, and more.

## About Shaders

Shaders is a component library for building creative WebGPU visual effects in the browser. Choose from 100+ pre-built components including gradients, distortions, particles, and color manipulations, then compose them by stacking, nesting, masking, and blending. Works with React, Vue, Svelte, Solid, and vanilla JavaScript. The visual design editor lets you create effects with drag-and-drop and export production-ready code. Includes MCP integration for AI agent workflows and curated preset collections on the Pro plan.

## Key Features

- 100+ pre-built WebGPU shader components

- Works with React, Vue, Svelte, Solid, and vanilla JS

- Visual editor to design and export effects

- Stack, nest, mask, and blend components

Tags: WebGPU, Shaders, Components, Visual Effects, React

[Try Shaders](<https://creatorstoolbox.com/resources/shaders>)

## Frequently Asked Questions about Shaders

### Is Shaders free?

Yes — the component library and basic editor are free. Pro unlocks curated presets and advanced features.

### What frameworks does it support?

React, Vue, Svelte, Solid, and vanilla JavaScript.

### Do I need to know GLSL or shader programming?

No — effects are pre-built components you can use and customize visually without writing shader code.

---
Canonical source: https://creatorstoolbox.com/resources/shaders