Skip to main content
Paper Shaders is available in two packages: a vanilla JavaScript package and a React wrapper. Choose the package that matches your framework.

​
Package Options

Vanilla JavaScript

@paper-design/shaders - Use with vanilla JS, Vue, Svelte, or any framework

React

@paper-design/shaders-react - React components with hooks support

​
React Installation

If you’re using React, install the React package which includes the core shaders as a dependency: 
npm install @paper-design/shaders-react

​
React Requirements

The React package requires:
  • React 18 or 19
  • @types/react 18 or 19 (optional, for TypeScript users)
The React package automatically includes @paper-design/shaders as a dependency, so you don’t need to install both.

​
Vanilla JavaScript Installation

For vanilla JavaScript or other frameworks (Vue, Svelte, etc.), install the core package: 
npm install @paper-design/shaders

​
Version Pinning

Important: Paper Shaders is currently in active development under 0.0.x versioning. Breaking changes may be introduced in minor version updates.
We recommend pinning your dependency to a specific version:
package.json
{
  "dependencies": {
    "@paper-design/shaders-react": "0.0.71"
  }
}
Or use exact version matching in your install command: 
npm install --save-exact @paper-design/shaders-react

​
Package Details

​
@paper-design/shaders-react

  • Current Version: 0.0.71
  • Bundle Type: ES Module
  • TypeScript: Full type definitions included
  • Dependencies: @paper-design/shaders@0.0.71
  • Peer Dependencies: react@^18 || ^19

​
@paper-design/shaders

  • Current Version: 0.0.71
  • Bundle Type: ES Module
  • TypeScript: Full type definitions included
  • Dependencies: Zero
  • Side Effects: None

​
TypeScript Support

Both packages include full TypeScript type definitions out of the box. No additional @types packages are needed. 
import { MeshGradient } from '@paper-design/shaders-react';
import type { MeshGradientProps } from '@paper-design/shaders-react';

// Full type safety and autocompletion
const MyComponent: React.FC<MeshGradientProps> = (props) => {
  return <MeshGradient {...props} />;
};

​
Verify Installation

After installation, verify that the package is correctly installed: 
import { MeshGradient } from '@paper-design/shaders-react';

console.log(MeshGradient); // Should output the component function

​
CDN Usage (Not Recommended)

While Paper Shaders is designed for bundler-based workflows, you can import it from a CDN: 
<script type="module">
  import { ShaderMount, meshGradientFragmentShader } from 'https://esm.sh/@paper-design/shaders@0.0.71';
  // Your code here
</script>
CDN usage is not officially supported and may have compatibility issues. We strongly recommend using a bundler like Vite, webpack, or Next.js.

​
Next Steps

Quick Start

Create your first shader in minutes

React Guide

Learn how to use shaders in React

​
Troubleshooting

Ensure your bundler is configured to handle ES modules. Most modern bundlers (Vite, Next.js, Create React App) handle this automatically.
Make sure you’re using TypeScript 4.5 or later. The package includes its own type definitions, so no @types packages are needed.
Paper Shaders requires React 18 or 19. Check your package.json to ensure compatibility:
npm list react
If you’re using an older bundler that doesn’t support ES modules well, try upgrading to the latest version of your bundler or switching to a modern alternative like Vite.