Shaders for Solid, signal-driven.
200+ shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for Solid.
Compatible with Solid 1.8+ and SolidStart
Ship a shader as easily as you ship a button.
Every effect in Shaders is a Solid component. Install the package, import, and compose shaders the same way you compose the rest of your UI. Props are type-safe, and any prop can be bound to a signal. Compatible with Solid 1.8+ and SolidStart.
components/GlassBackground.tsx
<GlassBackground />
Mix and match components
Stack, nest, mask and blend them to design new unique looks.
Production-ready
Every component is optimized for performance out of the box.
Fully reactive
Bind any prop to state. Drive animations reactively.
Design in a pro-grade editor. Export to your codebase.
FAQsInstalling and usage
Yes. Shaders runs on WebGPU, so it only renders in the browser. Wrap the component with clientOnly from @solidjs/start: it returns null during server rendering and mounts the shader in the browser inside a Suspense boundary. For finer control, return null when isServer is true, or gate the shader on a mounted signal. Read the SolidStart guide
Yes. Shaders has no SolidStart dependency. It needs Solid 1.8 or later and a browser. In a client-rendered Vite app you import and render. In other server-rendered setups, render the shader after mount behind an onMount signal.
No. You work with components and props. The shaders themselves are written and tuned by us, and the renderer compiles them for the GPU when the component mounts.
Yes. shaders/solid ships type declarations, and every component has typed props, so a misspelled prop or a wrong value type is caught before it reaches the browser.
Solid 1.8 and later. Props accept signals directly: pass the value from createSignal and, when it changes, the shader updates on the GPU with no recompile, so a slider or a store can drive an effect frame by frame.
Yes. The canvas has no intrinsic size. Whatever class or style you put on the Shader component controls its size and position, so w-full and aspect-video work the way you expect.
The canvas stays transparent, onReady never fires, and nothing is written to the console. The onUnavailable callback fires once so you can render your own fallback, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Effects render on the GPU, and prop changes write uniforms without recompiling. The renderer is built on TypeGPU rather than a general-purpose 3D engine, so shaders compile roughly 25x faster on the client than Three.js-based alternatives, and canvases scrolled out of view drop to about one frame per second. Performance guide
Yes. Shaders MCP connects Cursor, Claude Code, Codex, and other MCP-compatible agents to your account and the preset library. Your agent can search presets, install them into your Solid codebase, and wire props to your state. Set up Shaders MCP
Shaders is free to try. Install the package, explore the design editor, and experiment in your own projects. Commercial or production use requires a Core or Pro plan. See pricing
Yes. Shaders runs on WebGPU, so it only renders in the browser. Wrap the component with clientOnly from @solidjs/start: it returns null during server rendering and mounts the shader in the browser inside a Suspense boundary. For finer control, return null when isServer is true, or gate the shader on a mounted signal. Read the SolidStart guide
No. You work with components and props. The shaders themselves are written and tuned by us, and the renderer compiles them for the GPU when the component mounts.
Solid 1.8 and later. Props accept signals directly: pass the value from createSignal and, when it changes, the shader updates on the GPU with no recompile, so a slider or a store can drive an effect frame by frame.
The canvas stays transparent, onReady never fires, and nothing is written to the console. The onUnavailable callback fires once so you can render your own fallback, such as a gradient or an image. WebGPU is supported in all major modern browsers. Check your browser
Yes. Shaders MCP connects Cursor, Claude Code, Codex, and other MCP-compatible agents to your account and the preset library. Your agent can search presets, install them into your Solid codebase, and wire props to your state. Set up Shaders MCP
Yes. Shaders has no SolidStart dependency. It needs Solid 1.8 or later and a browser. In a client-rendered Vite app you import and render. In other server-rendered setups, render the shader after mount behind an onMount signal.
Yes. shaders/solid ships type declarations, and every component has typed props, so a misspelled prop or a wrong value type is caught before it reaches the browser.
Yes. The canvas has no intrinsic size. Whatever class or style you put on the Shader component controls its size and position, so w-full and aspect-video work the way you expect.
Effects render on the GPU, and prop changes write uniforms without recompiling. The renderer is built on TypeGPU rather than a general-purpose 3D engine, so shaders compile roughly 25x faster on the client than Three.js-based alternatives, and canvases scrolled out of view drop to about one frame per second. Performance guide
Shaders is free to try. Install the package, explore the design editor, and experiment in your own projects. Commercial or production use requires a Core or Pro plan. See pricing