Mesh Gradient Button

Install the shader dependency

npm install @paper-design/shaders-react

Add the component

npx shadcn@latest add https://glsilk.vercel.app/r/mesh-gradient-button.json

Quick Start

app/page.tsx

import { MeshGradientButton } from "@/components/ui/mesh-gradient-button";

export default function Home() {
  return (
    <div>
      <MeshGradientButton>Click me</MeshGradientButton>
    </div>
  );
}

Examples

Default

Open in

<MeshGradientButton>Mesh Gradient</MeshGradientButton>

High Energy Effect

Open in

<MeshGradientButton
  colors={["#ff0080", "#ff4000", "#ff8000", "#ffb000"]}
  distortion={1.0}
  swirl={0.3}
  speed={2}
  grainMixer={0.2}
  textClassName="text-white mix-blend-difference"
>
  High Energy
</MeshGradientButton>

Calm Ocean Theme

Open in

<MeshGradientButton
  colors={["#2196f3", "#00bcd4", "#009688", "#4caf50"]}
  distortion={0.3}
  swirl={0.05}
  speed={0.5}
  textClassName="text-white mix-blend-difference"
>
  Ocean Breeze
</MeshGradientButton>

Text Customization

Open in

<MeshGradientButton
  colors={["#ffffff", "#000000"]}
  distortion={1}
  swirl={0.2}
  textClassName="text-green-500"
>
  Custom Text Color
</MeshGradientButton>

Advanced Text Effects

Use the textClassName prop for custom text styling:

<MeshGradientButton textClassName="text-white mix-blend-difference">
  Inverted Text
</MeshGradientButton>

<MeshGradientButton textClassName="text-black">
  Black Text
</MeshGradientButton>

<MeshGradientButton textClassName="text-primary font-bold text-lg">
  Bold Primary Text
</MeshGradientButton>

API Reference

Prop

Type

Credits

Website: paper-design.com
GitHub: paper-design/shaders