Folder Card

Cards 161

About

Folder Card A visually appealing card component to display folder information, including a title, size, and a decorative icon, with built-in animations.

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

Code

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

Usage.tsx

import { 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>
  );
}