Card Status List

Component 355

About

This component displays a dynamic list of status-driven cards with built-in syncing animations, hover-activated actions, and staggered motion transitions using framer-motion. It supports syncing state transitions (updates-found → syncing → completed), animated status indicators, and optional back/add button callbacks. Perfect for onboarding flows, document indexing, status updates, guided setup sequences, or any app section where users must complete a set of progressive tasks.

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

Code

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

Usage.tsx

"use client";

import { AnimatedCardStatusList, type Card } from "@/components/ui/card-status-list";

const demoCards: Card[] = [
  { id: "1", title: "Import products from your store", status: "completed" },
  { id: "2", title: "Unique selling points", status: "completed" },
  { id: "3", title: "Primary customers", status: "completed" },
  { id: "4", title: "Common words & phrases", status: "updates-found" },
  { id: "5", title: "Company overview and offer details", status: "syncing" },
];

export default function Demo() {
  const handleSynchronize = (cardId: string) => {
    console.log("Synchronizing card:", cardId);
  };

  const handleAddCard = () => {
    console.log("Add new card clicked");
  };

  const handleBack = () => {
    console.log("Back button clicked");
  };

  return (
    <div className="min-h-screen w-full flex items-center justify-center bg-background">
      <AnimatedCardStatusList 
        title="Fundamentals Demo"
        cards={demoCards}
        onSynchronize={handleSynchronize}
        onAddCard={handleAddCard}
        onBack={handleBack}
        className="max-w-xl"
      />
    </div>
  );
}