Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/card-status-list"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>
);
}