Components
Loading preview...
Folder Card A visually appealing card component to display folder information, including a title, size, and a decorative icon, with built-in animations.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/folder-cardimport { Folder, FolderKanban, FolderClock } from "lucide-react";
import { FolderCard } from "@/components/ui/folder-card"; // Adjust the import path
const folders = [
{
title: "Documents & Reports",
size: "25 MB",
icon: <Folder className="h-8 w-8 text-purple-600 dark:text-purple-400" />,
variant: "default",
},
{
title: "Project Files",
size: "10 MB",
icon: <FolderKanban className="h-8 w-8 text-fuchsia-600 dark:text-fuchsia-400" />,
variant: "project",
},
{
title: "System Backups",
size: "64 MB",
icon: <FolderClock className="h-8 w-8 text-cyan-600 dark:text-cyan-400" />,
variant: "system",
},
];
export default function FolderCardDemo() {
return (
<div className="w-full max-w-4xl mx-auto p-4 md:p-8 bg-background">
{/* Header section */}
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold tracking-tight text-foreground">
Folder
</h2>
<a
href="#"
className="text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
>
See All
</a>
</div>
{/* Responsive grid for the cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{folders.map((folder, index) => (
<FolderCard
key={index}
title={folder.title}
size={folder.size}
icon={folder.icon}
variant={folder.variant as "default" | "project" | "system"}
// Stagger animation for each card
transition={{ duration: 0.5, ease: "easeOut", delay: index * 0.1 }}
/>
))}
</div>
</div>
);
}