Components
Loading preview...
An animated gradient that sits at the background of a card, button or anything.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/background-gradient"use client";
import React from "react";
import { BackgroundGradient } from "@/components/ui/background-gradient";
import { IconAppWindow } from "@tabler/icons-react";
import Image from "next/image";
export function BackgroundGradientDemo() {
return (
<div>
<BackgroundGradient className="rounded-[22px] max-w-sm p-4 sm:p-10 bg-white dark:bg-zinc-900">
<Image
src={`https://ui.aceternity.com/_next/image?url=%2Fjordans.webp&w=828&q=75`}
alt="jordans"
height="400"
width="400"
className="object-contain"
/>
<p className="text-base sm:text-xl text-black mt-4 mb-2 dark:text-neutral-200">
Air Jordan 4 Retro Reimagined
</p>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
The Air Jordan 4 Retro Reimagined Bred will release on Saturday,
February 17, 2024. Your best opportunity to get these right now is by
entering raffles and waiting for the official releases.
</p>
<button className="rounded-full pl-4 pr-1 py-1 text-white flex items-center space-x-1 bg-black mt-4 text-xs font-bold dark:bg-zinc-800">
<span>Buy now </span>
<span className="bg-zinc-700 rounded-full text-[0.6rem] px-2 py-0 text-white">
$100
</span>
</button>
</BackgroundGradient>
</div>
);
}