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

# Solid quickstart

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

## Installing the package

Shaders is one package for every framework:

```bash
npm install shaders
```

The Solid components come from `shaders/solid`.

## 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:

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

export default function Hero() {
  return (
    <Shader class="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 `class` or `style`:

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

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

{/* Full width, 16:9 */}
<Shader class="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 Solid component does:

```tsx
<Shader class="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 a signal

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

```tsx
import { createSignal } from 'solid-js'
import { Shader, LinearGradient } from 'shaders/solid'

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

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

      <input
        type="range"
        min={0}
        max={360}
        value={angle()}
        onInput={e => setAngle(Number(e.currentTarget.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 SolidStart and server rendering

Shaders needs a browser with a GPU, so it can't render on the server. In SolidStart, load the component that renders a `<Shader>` with `clientOnly`. The [SolidStart and SSR guide](/docs/guide/solid/ssr) covers `clientOnly`, `isServer` and `onMount` guards, and Solid without SolidStart.

## 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.