Graaadeints

Component 407

About

The Beauty of Gradients

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Graaadeints to your project and fits it to your theme.

Code

How Graaadeints is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Image from "next/image";
import Link from "next/link";
import { GradientGenerator } from "@/components/ui/graaadeints"

import { cn } from "@/lib/utils";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button"; 
 
export default function Gradients() {
  return (
    <div className="relative">
      <div className=" my-40">
        <div className="">
          <Image
            src="https://cdn.21st.dev/assets/mirror/b2/b2987064d67ebfc7d4f3a1468711c67ce2c7ee93f916aba6bcab8307121f51d9.png"
            alt="Your Image"
            height={700}
            width={700}
            className="absolute -top-28 -z-10 min-h-screen w-full object-cover"
          />
          <p className="px-6 text-center text-lg font-light uppercase tracking-widest text-white lg:text-xl">
            Introducing
          </p>

          <h1 className="text-center text-7xl tracking-tighter text-white sm:text-9xl">
            Graaadients
          </h1>
          <p className="mx-auto max-w-lg px-6 text-center text-sm font-light text-white lg:-mt-4 lg:text-lg">
            +5000 abstract gradient elements and backgrounds for your amazing
            design projects.
          </p>
        </div>
        <div className="mt-10 flex justify-center">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink
                  href="/"
                  className="text-slate-200 hover:text-white"
                >
                  Home
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="text-slate-200" />
              <BreadcrumbItem>
                <BreadcrumbLink
                  href="/products"
                  className="text-slate-200 hover:text-white"
                >
                  Products
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator className="text-slate-200" />
              <BreadcrumbItem>
                <BreadcrumbPage className="text-white">
                  Graaadients
                </BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </div>
        <GradientGenerator />

        <p className="ml-2 mt-6 text-center font-semibold ">
          All gradients are 100% free.
        </p>
        
      </div>
    </div>
  );
}

export  {Gradients}