Toggle Sidebar B
Light & dark mode D

Quickstart

Install Shaders and build your first GPU-accelerated effect

Installation

bash
npm install shaders

Shaders is a single package regardless of your framework. No framework-specific adapters needed.

Import your components

Import from the entry point that matches your framework:

vue
import { Shader, LinearGradient, CursorTrail } from 'shaders/vue'

Your first shader

Wrap your effects in a <Shader> component and add children inside:

vue
<Shader class="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

<Shader> renders a <canvas> element. The child components are visual layers - evaluated top to bottom, blended together on the GPU. The class or style you apply to <Shader> controls the canvas size and position.

Sizing the canvas

The canvas has no intrinsic size, so you must give it dimensions. Any CSS sizing works - Tailwind classes, inline styles, or a custom class:

vue
<!-- Fill the viewport -->
<Shader class="w-screen h-screen">
  <LinearGradient />
</Shader>

<!-- Fixed dimensions -->
<Shader style="width: 600px; height: 400px;">
  <LinearGradient />
</Shader>

<!-- Aspect ratio with fluid width -->
<Shader class="w-full aspect-video">
  <LinearGradient />
</Shader>

The canvas automatically resizes when its CSS dimensions change - no manual resize calls needed.

Configuring components

Each component accepts props that control its appearance. Browse the Component Docs for full prop references, or use the Design Editor to explore and export ready-to-paste configurations:

vue
<Shader class="w-full h-64">
  <LinearGradient
    colorA="#ff6b6b"
    colorB="#4ecdc4"
    :angle="45"
    color-space="oklch"
  />
</Shader>

Using with SSR frameworks

Shaders uses WebGPU, which requires a browser environment. If you're using Nuxt, Next.js, SvelteKit, or SolidStart, see the framework-specific SSR guide for your setup.

Next steps

What is Shaders?Quickstart