Components
Loading preview...
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.
@kavikatiyar
npx shadcn@latest add https://21st.dev/r/kavikatiyar/cards-grid// 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;