README

Shaders

  WebGPU effects as componentsfor React, Vue, Svelte, Solid and JavaScript



  
  
  
  




bash
npm install shaders


 Table of Contents

1. Why Shaders?
2. 🧩 Components
3. 🎨 Design visually, export code
4. ⌨️ CLI
5. 🤖 Using Shaders with AI
6. ⚡️ Shaders Pro
7. 🧪 Build your own component
8. 👩🏻‍⚖️ License
9. 💎 Contribute

 Why Shaders?

-   Real WebGPU, declarative API: 200+ effects you drop in as components. Gradients, noise, glass, metal, light, distortions, transitions, blurs, cursor effects. Nest them, blend them, mask them.
-   A design editor that writes your code: design on an infinite canvas at shaders.com, then export the exact component tree for your framework. Free.
-   Every framework, one package: first-class React, Vue, Svelte, Solid and JavaScript entries, with the same props everywhere.
-   Production-ready: TypeScript, extensively optimized, typed props with reactive updates, SSR safe. Used on thousands of websites by 16,000+ design engineers.

 🧩 Components

Every effect is a component.  renders the canvas; its children are layers, evaluated top to bottom and blended on the GPU.

 React

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


  
  



Get started with Shaders for React.

 Vue

html

import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'



  
    
    
  



Get started with Shaders for Vue.

 Svelte

svelte

  import { Shader, LinearGradient, CursorTrail } from 'shaders/svelte'



  
  



Get started with Shaders for Svelte.

 Solid

tsx
import { Shader, LinearGradient, CursorTrail } from 'shaders/solid'


  
  



Get started with Shaders for Solid.

 JavaScript

javascript
import { createShader } from 'shaders/js'

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


Get started with Shaders for JavaScript.

Browse all 200+ components, each with a live preview and every prop documented.

 🎨 Design visually, export code

Most people don't write their effects by hand. They design them.

The design editor at shaders.com is an infinite canvas where you stack components, tune every prop with real controls, drive props from the cursor or a timeline, and see the result live. When it looks right, Export Code gives you the component tree in your framework, ready to paste.

Design and export are free with an account. Your work is saved as projects you can come back to.

Open the design editor

 ⌨️ CLI

The CLI connects a codebase to your Shaders account, so the effects you design land in your project as real component files and stay in sync.

bash
npx shaders                 guided flow: set up, find a preset, open the editor
npx shaders connect         link this codebase to a Shaders project
npx shaders install         pick shaders from that project; writes component files
npx shaders search "..."    find a preset in the library by describi

Top issues

Latest release

compare changes

 Fixes

- Restore React shader layers after renderer resets (25)
- Re-register Svelte and Solid layers after renderer resets (26)

 🏡 Chore

- Remove shader registry dependency for tree-shaking (31)

 Contributors

- Dhruv Arora (@dhruv1220)
- Simon Le Marchant (@marchantweb)
- Aakash Kharb