Workflow Builder Card

Cards 442

About

Workflow Builder Card A responsive and theme-adaptive card component designed to showcase AI workflows. It features a subtle hover animation that elegantly reveals additional details like a description and tags. The card is highly reusable, with its content, including images, user avatars, and action icons, managed through props.

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

Code

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

Usage.tsx

import { Code, Share2, Zap } from "lucide-react";
import { WorkflowBuilderCard } from "@/components/ui/workflow-builder-card"; // Adjust the import path

export default function WorkflowBuilderCardDemo() {
  const cardData = {
    imageUrl: "https://cdn.21st.dev/assets/mirror/55/5577ac2ace2cc867746348f55cf84d6b0207b268f9f4f06cc34419970b4fd0f3.jpg",
    status: "Active" as const,
    lastUpdated: "5 days ago",
    title: "Personal Email Assistant",
    description: "Your AI helper for reading, organizing, and responding to emails.",
    tags: ["Personal", "Marketing"],
    users: [
      { src: "https://cdn.21st.dev/assets/mirror/f0/f02fed36023656a5b5df6f247c83c96c53bfa9db5b98085cdee93ffc938a5f37.jpg", fallback: "U1" },
      { src: "https://cdn.21st.dev/assets/mirror/5b/5b5b2f3487692d40f629010ea6448d150907f780d8c262c4ca194b7386115c2d.jpg", fallback: "U2" },
      { src: "https://cdn.21st.dev/assets/mirror/10/10e2bfa5446e5c116e269b649b5f5e0106d96643f0a903048f3a056e40c35cd8.jpg", fallback: "U3" },
      { src: "https://cdn.21st.dev/assets/mirror/fa/fae47bb0faba45d1e0696b6557ca36c551a738c7d6e3950e82bb69dd2f963a72.jpg", fallback: "+3" },
    ],
    actions: [
      { Icon: Zap, bgColor: "bg-blue-500" },
      { Icon: Code, bgColor: "bg-gray-700" },
      { Icon: Share2, bgColor: "bg-red-500" },
    ],
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <WorkflowBuilderCard {...cardData} />
    </div>
  );
}