Quick start

Mesh Gradient supports React and SSR frameworks like Next.js via the @mesh-gradient/react package.

Installation

npm install @mesh-gradient/react

pnpm add @mesh-gradient/react

yarn add @mesh-gradient/react

bun add @mesh-gradient/react

Usage

import { MeshGradient } from '@mesh-gradient/react'
 
const App = () => {
  return <MeshGradient style={{ width: '10rem', height: '10rem' }} />
}

That’s it! You should see the the result on the page:

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.