# Shaders

> Open-source WebGPU shader component library and free design editor.

Shaders is an open-source library that provides production-ready WebGPU shader visual effects packaged as components for modern web frameworks. It includes a browser-based design editor to visually customize, create, and export shader effects directly into code.

Website: https://shaders.com/

Also at: https://github.com/shader-effects-inc/shaders

## What it is for

- Add interactive GPU-accelerated background effects to web landing pages
- Customize shader visuals visually in the design editor before exporting to code
- Incorporate high-performance WebGPU graphics into React, Vue, Svelte, or Solid apps

## Features

- Support for React, Vue, Svelte, Solid, vanilla JavaScript, and Framer
- Production-ready WebGPU shader components and pre-built sections
- Free web-based design editor to create and tweak shader parameters
- Open-source codebase distributed under the MIT license
- Extensive preset library for backgrounds and creative frontend effects

## Pricing

Open source. Free and open source (MIT license)

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Web, Code library
- For: Frontend developers, creative developers, and design engineers
- Alternative to: Three.js, React Three Fiber, ShaderToy
- Tags: webgpu, shaders, creative coding, react, vue, svelte, frontend

## Why it was saved

- [@marchantweb, 23 September 2025](https://x.com/marchantweb/status/1970527594450760109): Lets developers add jaw-dropping creative shader/visual effects to web apps built with React, Vue, Svelte, Solid or plain JS, composed as components.
- [@MengTo, 10 October 2026](https://x.com/MengTo/status/2108924473265275003): The source library the tweet is about; the thing you actually install or copy components from.

## Compare

- [Alternatives to Three.js](https://xiry.app/alternatives/three-js.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/shaders

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.