A grid of cards with a pointer-tracked glowing border and blurred background effect, ideal for showcasing profiles, avatars or team members.
import { GlowCard, GlowCardGrid } from "@/components/ui/glow-card-grid";
export default function GlowCardGridDemo() {
return (
<div className="w-full p-4">
<GlowCardGrid>
{CARDS.map((card) => (
<GlowCard
key={card.name}
name={card.name}
handle={card.handle}
avatar={card.avatar}
/>
))}
</GlowCardGrid>
</div>
);
}
const CARDS = [
{
name: "shadcn",
handle: "@shadcn",
avatar: "https://unavatar.io/x/shadcn",
},
{
name: "OrcDev",
handle: "@orcdev",
avatar: "https://unavatar.io/x/orcdev",
},
{
name: "David Haz",
handle: "@davidhdev",
avatar: "https://unavatar.io/x/davidhdev",
},
{
name: "Shu",
handle: "@shuding",
avatar: "https://unavatar.io/x/shuding",
},
{
name: "Emil Kowalski",
handle: "@emilkowalski",
avatar: "https://unavatar.io/x/emilkowalski",
},
{
name: "Chánh Đại",
handle: "@iamncdai",
avatar: "https://unavatar.io/x/iamncdai",
},
];
Part of Chánh Đại — browse the full library on 21st.dev.