Shaders for React, composed in JSX.

200+ shader components, TypeScript ready. Compose in your codebase, or design in the editor and export for React.

<Arc/>

<Beam/>

<Bend/>

<Blob/>

<Blur/>

<Arc/>

<Beam/>

<Bend/>

<Blob/>

<Blur/>

<Arc/>

<Beam/>

<Bend/>

<Blob/>

<Blur/>

<Flip/>

<Flip/>

<Flip/>

<Fog/>

<Glow/>

<Goo/>

<Grid/>

<Fog/>

<Glow/>

<Goo/>

<Grid/>

<Fog/>

<Glow/>

<Goo/>

<Grid/>

<Line/>

<Line/>

<Line/>

<Neon/>

<Neon/>

<Neon/>

<Ring/>

<Ring/>

<Ring/>

<Star/>

<Star/>

<Star/>

<Text/>

<Tint/>

<VHS/>

<Text/>

<Tint/>

<VHS/>

<Text/>

<Tint/>

<VHS/>

<Wool/>

<Wool/>

<Wool/>

Compatible with React 18, 19 and Next.js

Ship a shader as easily as you ship a button.

Every effect in Shaders is a React 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 reactive state. Everything works in React 18 and 19, in Vite, and in Next.js.

React quickstart Using with Next.js

components/GlassBackground.tsx

import { ... } from 'shaders/react'

export default function GlassBackground() {
  return (
    <Shader>
      <Swirl
        colorA="#ffffff"
        colorB="#f0f0f5"
        detail={1.5} />
      <ChromaFlow
        baseColor="#ffffff"
        downColor="#4642ff"
        leftColor="#56c2fc"
        radius={4}
        rightColor="#5b4fff"
        upColor="#7f66ff" />
      <FlutedGlass
        aberration={0}
        angle={30}
        frequency={8}
        lightAngle={-90}
        refraction={4}
        shape="rounded"
        softness={1} />
    </Shader>
  )
}

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. In the App Router, put the shader in a 'use client' component and use it from any Server Component, page, or layout. In the Pages Router, or to keep a file free of directives, load it with next/dynamic and ssr: false. Read the Next.js guide

Yes. Shaders has no Next.js dependency. It needs React 18 or 19 and a browser. In a client-rendered Vite app you import and render. In other server-rendered setups, render the shader after mount with a mounted-state guard.

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/react 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.

React 18 and React 19. The Shader component handles the Strict Mode double mount in development, so you can leave Strict Mode on.

Yes. The canvas has no intrinsic size. Whatever className 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 React 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