Quick Start (React)
Set up Mesh Gradient in a React app with minimal configuration.
Quick start
Mesh Gradient supports React and SSR frameworks like Next.js via the @mesh-gradient/react package.
Installation
npm install @mesh-gradient/reactUsage
import { MeshGradient } from '@mesh-gradient/react'
const App = () => {
return <MeshGradient style={{ width: '10rem', height: '10rem' }} />
}That's it! You should see the result on the page:
Sizing: set style, className, or a sized wrapper so the canvas always has a layout box. See Canvas layout & HiDPI.
Note: By default, colors and seed (initial pattern) of the gradient are generated randomly.
Configure gradient
The mesh gradient can be configured by passing options prop.
<MeshGradient options={{ seed: 1 }} />Changing options prop will update the gradient with new settings. <MeshGradient /> component supports smooth appearance and fade transitions between states out-of-the-box.
You can generate code for config by using Playground interface or explore all available options in the API section.