Customizable 3D, moving gradient for React. The v2 package is lean: it only ships the ShaderGradient renderer (and its canvas helper), while the stateless UI pieces now live in the separate @shadergradient/ui package.
- 📦 Installation
- 📦 Packages
- 💻 Usage
- 📚 Examples
- 🎤 Conference Talks
- 📝 Contributing
- 🚀 Future Plan
- ⚖️ License
Framer Component (Copy this URL and paste it on Framer Canvas)
Install the core renderer and its peer deps.
# with yarn
yarn add @shadergradient/react @react-three/fiber three three-stdlib camera-controls
yarn add -D @types/three
# with npm
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/three
# with pnpm
pnpm add @shadergradient/react @react-three/fiber three three-stdlib camera-controls
pnpm add -D @types/three
Need the stateless control surfaces? Pull them from the @shadergradient/ui package (ESM build used by Framer/Figma), not from @shadergradient/react.
@shadergradient/react itself works on React 18 or 19, but the right @react-three/fiber version depends on your environment. For Next.js 15 App Router specifically, you must use R3F v9 + React 19 — R3F v8 is structurally incompatible with the App Router's vendored React 19 canary (see #138 for the full trace).
| Environment | React | @react-three/fiber | three |
|---|---|---|---|
| Next 15 — App Router | ^19.0.0 |
^9.0.0 |
>=0.158.0 |
| Next 14 / Next 15 Pages / Vite / etc. | ^18 or ^19 |
matching 8.x/9.x |
>=0.158.0 |
No next.config aliases or transpilePackages entries are required when you stay on these combinations.
Use ShaderGradient inside ShaderGradientCanvas from @shadergradient/vue.
See installation and Vue/Nuxt usage
for installation commands, component examples, SSR fallbacks, and supported
dependency versions.
@shadergradient/react- Ships only the renderer:
ShaderGradientandShaderGradientCanvas. - No built-in store or controls. Use your own state or pair with
- Ships only the renderer: