Cards Grid

Features 167

About

Resource Cards Grid A responsive grid of cards, perfect for displaying links to key resource sections like documentation, contracts, or policies. Each card features an icon, title, update timestamp, and a clear call-to-action arrow. The grid uses framer-motion for smooth, staggered loading animations and hover effects.

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

Code

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

Usage.tsx

// demo.tsx

import { ResourceCardsGrid, ResourceCardItem } from "@/components/ui/cards-grid";

// Sample data for the resource cards
const resourceData: ResourceCardItem[] = [
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-tRfo11d3TVT3JA1CtlD6iR8HZCvIQM.png&w=320&q=75",
    title: "SOPs",
    lastUpdated: "29 April 2025",
    href: "#",
  },
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-fs2N6IIs4VkGZQpjrS17tAgnWBFkbl.png&w=320&q=75",
    title: "Contracts",
    lastUpdated: "29 April 2025",
    href: "#",
  },
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-uqbQgvm8wfMxwP35nXRvS4ZteqmoCU.png&w=320&q=75",
    title: "Templates",
    lastUpdated: "29 April 2025",
    href: "#",
  },
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vSXxF8u21GdIWRr8AtFn5sK74jIZN8.png&w=320&q=75",
    title: "Policies",
    lastUpdated: "29 April 2025",
    href: "#",
  },
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-OcGyav7XXTTVq0fDXxzmOVek6Noq7s.png&w=320&q=75",
    title: "Knowledge Base",
    lastUpdated: "29 April 2025",
    href: "#",
  },
  {
    iconSrc: "https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-5zVOONIN28dJticozuMBCoSEjaw6VA.png&w=320&q=75",
    title: "Archive",
    lastUpdated: "29 April 2025",
    href: "#",
  },
];

const ResourceGridDemo = () => {
  return (
    <div className="w-full max-w-6xl p-4 md:p-8">
      <ResourceCardsGrid items={resourceData} />
    </div>
  );
};

export default ResourceGridDemo;