---
title: Quickstart
description: Install Shaders in a React app, render your first effect, and drive a prop from state.
icon: rocket
category: code
---

# React quickstart

By the end of this page you'll have a gradient with a cursor trail running in your React app, sized with CSS and driven by state.

## Installing the package

Shaders is one package for every framework:

```bash
npm install shaders
```

The React components come from `shaders/react`.

## Rendering your first effect

Let's start with a gradient and put a cursor trail on top of it. Add this component anywhere in your app:

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

export default function Hero() {
  return (
    <Shader className="w-full h-64">
      <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
      <CursorTrail />
    </Shader>
  )
}
```

Move your cursor over the canvas to see the trail.

`<Shader>` renders a single `<canvas>`. The components inside it are **layers**, drawn in order like layers in Figma: the gradient first, then the trail on top.

## Sizing the canvas

The canvas has no size of its own. It takes whatever size you give `<Shader>` through `className` or `style`:

```jsx
{/* Fill the viewport */}
<Shader className="w-screen h-screen">
  <LinearGradient />
</Shader>

{/* Fixed size */}
<Shader style={{ width: 600, height: 400 }}>
  <LinearGradient />
</Shader>

{/* Full width, 16:9 */}
<Shader className="w-full aspect-video">
  <LinearGradient />
</Shader>
```

Style `<Shader>`, not the `<canvas>` inside it. The internal markup can change between releases.

## Setting props

Each component takes props, in camelCase, the same way any React component does:

```jsx
<Shader className="w-full h-64">
  <LinearGradient
    colorA="#ff6b6b"
    colorB="#4ecdc4"
    angle={45}
    colorSpace="oklch"
  />
</Shader>
```

`colorSpace="oklch"` blends the two colors through a perceptual color space, so the middle of the gradient stays bright instead of going gray. Every component's props, with defaults and ranges, are in the [component docs](/docs/components).

## Driving a prop from state

Props accept state like any other React prop. We'll wire the gradient's angle to a range input:

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

export default function GradientDial() {
  const [angle, setAngle] = useState(0)

  return (
    <>
      <Shader className="w-full h-64">
        <LinearGradient colorA="#ff6b6b" colorB="#4ecdc4" angle={angle} />
      </Shader>

      <input
        type="range"
        min={0}
        max={360}
        value={angle}
        onChange={e => setAngle(Number(e.target.value))}
      />
    </>
  )
}
```

Drag the slider and the gradient turns on the next frame. Changing `angle` updates a value on the GPU; the effect doesn't recompile.

## Using Next.js and server rendering

Shaders needs a browser with a GPU, so it can't render on the server. In the Next.js App Router, put `'use client'` at the top of any file that renders a `<Shader>`. The [Next.js and SSR guide](/docs/guide/react/ssr) covers the App Router, the Pages Router, and other SSR setups.

## Next steps

- [Composing effects](/docs/guide/composing-effects): stack and nest components, blend and mask layers.
- [Layout and positioning](/docs/guide/layout-positioning): place the canvas behind or around your UI.
- [Component docs](/docs/components): every component with a live preview and its props.