Highlights ✨

• One seed becomes one memorable gradient—every time
• SSR and hydration safe in Next.js, TanStack Start, Remix, and more
• Renders a regular <div> with an SVG background
• Works naturally with Tailwind CSS classes and standard React props

Install

npm install @noyzi/react

Requires React 18+ and Tailwind CSS 4+.

Quick start 🚀

import { NoyziGradient } from "@noyzi/react";

export function Avatar({ email }: { email: string }) {
  return (
    <NoyziGradient
      seed={email}
      aria-label={`${email}'s gradient`}
      className="size-12 rounded-full"
    />
  );
}

Different seed, different artwork. The same seed always renders identically—even on the server.

Make it yours 🎛️

<NoyziGradient
  seed="summer-mixtape"
  options={{ palette: ["#f5eee0", "#8fb9be", "#ebdac3"] }}
  artwork={{ width: 1600, height: 400 }}
  className="h-40 w-full rounded-2xl shadow-none"
/>

The first palette color is the background and the remaining colors are accents. Pass 2–8 #rgb or #rrggbb colors. The seed still determines the composition, so a palette swap keeps its geometry.

Use className or style for size and shape. For wide or tall elements, match artwork to the element’s aspect ratio so the gradient composition fills it beautifully.

Need a stable, shareable seed without exposing user data?

import { NoyziGradient, seedHash } from "@noyzi/react";

const seed = seedHash("[email protected]");

<NoyziGradient seed={seed} className="size-16 rounded-xl" />;

See all props and generation options in the React API docs. 📖

License

MIT © Noyzi