# [Shaders](<https://shaders.com/>)

[shaders.com](<https://shaders.com/>)

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

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Development](<https://creatorstoolbox.com/communities/development>)[Video & Film](<https://creatorstoolbox.com/communities/video>)

Media 1 of 3

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

Pricing model: Freemium

## 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

## FAQs

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

## Similar products

- [![Border Beam](<https://www.google.com/s2/favicons?domain=jakubantalik.com&sz=128>)

Border Beambeam.jakubantalik.com

A lightweight React component that renders an animated glowing border beam effect — multiple sizes, color variants, and themes.](<https://creatorstoolbox.com/products/border-beam>)

- [![Paper Shaders](<https://www.google.com/s2/favicons?domain=paper.design&sz=128>)

Paper Shadersshaders.paper.design

Ultra-fast, zero-dependency open-source shaders for your projects — as React components or GLSL.](<https://creatorstoolbox.com/products/paper-shaders>)

- [![Loading UI](<https://www.google.com/s2/favicons?domain=loading-ui.com&sz=128>)

Loading UIloading-ui.com

Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.](<https://creatorstoolbox.com/products/loading-ui>)

- [![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrixdotmatrix.zzzzshawn.cloud

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/products/dotmatrix>)

- [![ObsidianUI](<https://www.obsidianui.dev/icon.png>)

ObsidianUIobsidianui.dev

Open-source React and Tailwind CSS component library of animated, interactive UI effects you can preview, copy, or install via the shadcn CLI.](<https://creatorstoolbox.com/products/obsidian-ui>)

- [![Paperlab](<https://creatorstoolbox.com/images/paperlab-logo.svg>)

Paperlabpaperlab.nawwara.studio

Physical paper as a React component — real 3D sheets that peel, unroll, fold and hang, dialled in through a visual editor.](<https://creatorstoolbox.com/products/paperlab>)

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