Mesh Gradient Background

A layered SVG mesh gradient with blurred color pools and a dot texture.

A layered SVG mesh gradient with blurred color pools, a curved foreground, and a dot texture.

Installation

text

Add the mesh-gradient-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/mesh-gradient-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

Import the component and add it to your page.

tsx

import { MeshGradientBackground } from "@/components/hangry-ui/shader/mesh-gradient-background";

<MeshGradientBackground />

Props

Prop	Type	Default	Description
Native props	`ComponentProps`	—	Accepts the native props documented by the component source.

Dependencies

No additional packages required.