LiveKit docs › Components › Miscellaneous › ReactShaderToy

---

# React Shader Toy

> Easily render ShaderToy based shaders.

> ℹ️ **Note**
> 
> This component was forked from Rysana's [react-shaders](https://rysana.com/docs/react-shaders) and modified to work with the latest version of [React](https://react.dev/) and [Next.js](https://nextjs.org/).

## Usage

**[ReactShaderToy](https://docs.livekit.io/reference/components/agents-ui/component/react-shader-toy.md)** preview:

```tsx
'use client';

import { ReactShaderToy } from '@/components/agents-ui/react-shader-toy';

const fs = `
void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
  vec2 uv = fragCoord/iResolution.xy;
  vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
  fragColor = vec4(col,1.0);
}
`;

export function Demo() {
  return <ReactShaderToy fs={fs} />;
}
```

## Features

- Easily create and render [ShaderToy](https://www.shadertoy.com/) shaders in your React application
- Provide custom uniforms and textures
- Provide custom WebGL context attributes

## Installation

```bash
pnpm dlx shadcn@latest add @agents-ui/agent-audio-visualizer-bar

```

## Props

| Prop name | Type | Default |
| --------- | ---- | ------- |
| `fs` | string | – |
| `vs?` | string | ``attribute vec3 aVertexPosition;
void main(void) {
    gl_Position = vec4(aVertexPosition, 1.0);
}`` |
| `textures?` | TextureParams[] | `[]` |
| `uniforms?` | Uniforms | – |
| `clearColor?` | Vector4<number> | `[0, 0, 0, 1]` |
| `precision?` | enum | `highp` |
| `style?` | CSSProperties | – |
| `contextAttributes?` | Record<string, unknown> | `{}` |
| `lerp?` | number | `1` |
| `devicePixelRatio?` | number | `1` |
| `onDoneLoadingTextures?` | () => void | – |
| `onError?` | ((error: string) => void) & ReactEventHandler<HTMLCanvasElement> | `console.error` |
| `onWarning?` | (warning: string) => void | `console.warn` |
| `animateWhenNotVisible?` | boolean | – |

---

This document was rendered at 2026-06-07T11:35:12.633Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/agents-ui/component/react-shader-toy.md](https://docs.livekit.io/reference/components/agents-ui/component/react-shader-toy.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).