Grid Card

Features 119

About

A stylish React + Tailwind CSS Grid Card component featuring animated background patterns and gradient effects. Ideal for dashboards, feature cards, pricing sections, and modern UI layouts.

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

Code

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

Usage.tsx

import { GridCard } from "@/components/ui/grid-card";
import { Grid2x2Check } from 'lucide-react';

export default function DemoOne() {
 	return (
		<div className="relative flex min-h-screen w-full items-center justify-center">
			<GridCard className="size-72">
				<Grid2x2Check className="text-foreground/80 relative size-8" />
				<div className="relative">
					<span className="text-foreground/80 text-lg font-medium">
						Grid Card
					</span>
					<p className="text-muted-foreground text-sm">
						Have you ever wondered how to create a grid card with a hover effect?
					</p>
				</div>
			</GridCard>
		</div>
	);
}