Installation

Add a moving gradient to a React app in three steps.

gradients.sh installs through the shadcn CLI, so it works in any React project shadcn supports: Next.js, Vite, React Router, TanStack Start and others.

1. Set up shadcn

Skip this if your project already has a components.json.

npx shadcn@latest init

2. Add a component

pnpm dlx shadcn@latest add https://gradients.sh/r/mesh-gradient.json

This adds components/mesh-gradient.tsx, the shared components/gradient-surface.tsx and the engine in lib/gradient-engine/. The next component you add reuses the surface and the engine.

3. Use it

import { MeshGradient } from "@/components/mesh-gradient";

export function Hero() {
  return (
    <MeshGradient className="h-[480px]">
      <h1 className="p-12 text-5xl font-semibold text-white">Ship faster</h1>
    </MeshGradient>
  );
}

Start your dev server. The heading sits on a slowly moving gradient.

Install by name

Add the registry to components.json once:

{
  "registries": {
    "@gradients.sh": "https://gradients.sh/r/{name}.json"
  }
}

Then install any free component by name:

npx shadcn@latest add @gradients/aurora