# @mesh-gradient/react

2.0.2 • Public • Published a month ago

# React Mesh Gradient

[Permalink: React Mesh Gradient](/content/package/@mesh-gradient/react#react-mesh-gradient/index.html)

Apple-inspired animated **mesh gradient** component for React applications. A React wrapper around the high-performance WebGL-powered mesh gradient library.

## ✨ Features

[Permalink: ✨ Features](/content/package/@mesh-gradient/react#-features/index.html)

- 🔄 **Smooth Animations** \- Hardware-accelerated WebGL transitions
- 🎨 **Customizable Colors** \- Support for up to 4 colors simultaneously
- ⚡ **Static Mode** \- Optimized mode for static gradients
- 📱 **Responsive** \- Automatic pause when out of viewport
- 🚀 **High Performance** \- WebGL hardware acceleration with smart optimizations
- 🛠️ **TypeScript** \- Full type support out of the box
- ⚛️ **React-First** \- Built specifically for React with hooks and components
- 📦 **Lightweight** \- Minimal bundle size impact

## Documentation

[Permalink: Documentation](/content/package/@mesh-gradient/react#documentation/index.html)

Documentation website [available here](https://meshgradientweb.vercel.app/).

## ⚠️ Important Notes

[Permalink: ⚠️ Important Notes](/content/package/@mesh-gradient/react#%EF%B8%8F-important-notes/index.html)

1. **Sizing** — the component renders a `<canvas>`; pass `style` / `className` (or a sized wrapper) so layout is well-defined before first paint.
2. **WebGL** — requires WebGL in the browser.
3. **Cleanup** — handled on unmount; call `destroy` on any manual instances you create elsewhere.
4. **Performance** — use `options.isStatic` for motionless gradients.

## 🛠️ Development

[Permalink: 🛠️ Development](/content/package/@mesh-gradient/react#%EF%B8%8F-development/index.html)

```
# Install dependencies
pnpm install

# Start development
pnpm dev

# Build package
pnpm build

# Lint code
pnpm lint

# From monorepo root — typecheck all packages
pnpm check-types
```

## 🤝 Contributing

[Permalink: 🤝 Contributing](/content/package/@mesh-gradient/react#-contributing/index.html)

Contributions are welcome! Please see the [contributing guide](https://github.com/mikhailmogilnikov/mesh-gradient/blob/HEAD/CONTRIBUTING.md) for details.

## 📄 License

[Permalink: 📄 License](/content/package/@mesh-gradient/react#-license/index.html)

MIT © [Mikhail Mogilnikov](https://github.com/mikhailmogilnikov)

## Readme

### Keywords

- [mesh-gradient](/content/search?q=keywords:mesh-gradient/index.html)
- [react](/content/search?q=keywords:react/index.html)