A grid of sponsor avatars grouped by contribution tier, with initials fallbacks, custom tier colors, and profile links.
import {
PolarSponsorGrid,
type Sponsor,
} from "@/components/ui/polar-sponsor-grid";
const sponsors: Sponsor[] = [
{
id: "1",
name: "Vercel",
amount: 500,
avatarUrl: "https://cdn.21st.dev/assets/mirror/75/750f6ec055e825533be5a5f62844312beeb7f41870eac9fa7d1e168f9f352246.png",
profileUrl: "#",
},
{
id: "2",
name: "Supabase",
amount: 250,
avatarUrl: "https://cdn.21st.dev/assets/mirror/a3/a38b8db9988794a3e3f2076676487584da481ad718350126dd331c1924fa084f.png",
profileUrl: "#",
},
{
id: "3",
name: "Tailwind Labs",
amount: 80,
avatarUrl: "https://cdn.21st.dev/assets/mirror/da/da758d1694faa4c2213ac4d1eb72033d1240f00eec39bc7c107bf713643fd164.png",
profileUrl: "#",
},
{
id: "4",
name: "React",
amount: 60,
avatarUrl: "https://cdn.21st.dev/assets/mirror/38/3876b393102ffb040fbac5d953f1ec01586d91932634052c8662376e60b0ca57.png",
profileUrl: "#",
},
{
id: "5",
name: "Node.js",
amount: 30,
avatarUrl: "https://cdn.21st.dev/assets/mirror/a5/a58a4c8623692203a6cad330ddf95b2c0edaf2f704254bcb64d0709a880480a1.png",
profileUrl: "#",
},
{
id: "6",
name: "Vite",
amount: 28,
avatarUrl: "https://cdn.21st.dev/assets/mirror/5c/5c66688fc2daa6bcb909a5634edd53b9e8121d60481a7901a1d8e534db988eaa.jpg",
profileUrl: "#",
},
{
id: "7",
name: "Deno",
amount: 15,
avatarUrl: "https://cdn.21st.dev/assets/mirror/30/3008d77e673696d5c2a2fc2d2095751c144a4d02c3afb45c9cd512e78f6138e2.png",
profileUrl: "#",
},
{
id: "8",
name: "Prisma",
amount: 12,
avatarUrl: "https://cdn.21st.dev/assets/mirror/5c/5cf6fc7b5c7eb878e887e7dd51caac39b165b67c8e893ddd4b846f2d5806e53b.png",
profileUrl: "#",
},
{
id: "9",
name: "Remix",
amount: 5,
avatarUrl: "https://cdn.21st.dev/assets/mirror/6e/6eb2d6b127ea073738a7b7ef016b064da32fb9f50dd6005a552ca1d7a9ad191b.png",
profileUrl: "#",
},
{
id: "10",
name: "Expo",
amount: 3,
avatarUrl: "https://cdn.21st.dev/assets/mirror/97/97235540d7710ef83c1c9753ab6aed77c31e8e33221c791bbcaf6269bddfc946.png",
profileUrl: "#",
},
];
export default function PolarSponsorGridDemo() {
return (
<div className="flex w-full items-center justify-center bg-background text-foreground p-8">
<PolarSponsorGrid sponsors={sponsors} />
</div>
);
}