Workflow Card

A card component for displaying workflow automations with rotated tool icons, execution stats, and action buttons.

Usage in Gaia

The automation interface. Visualizes agentic workflows and their status.

Features

Rotated Tool Icons - Eye-catching alternating rotation effect for category icons
Multiple Variants - User (run), explore (create), and suggestion variants
Execution Stats - Display run count with smart formatting (1.2K, 3.5M)
Activation Status - Show active/inactive state for user workflows
Trigger Labels - Display workflow trigger information
Action Buttons - Configurable action buttons with loading states
Category Colors - 10+ predefined categories with distinct color schemes

Installation

npx shadcn@latest add https://ui.heygaia.io/r/workflow-card.json

Usage

import { WorkflowCard } from "@/components/ui/workflow-card";
 
export default function Example() {
  return (
    <WorkflowCard
      title="Email Summary Workflow"
      description="Summarize your daily emails automatically"
      steps={[
        { id: "1", title: "Fetch emails", toolCategory: "email" },
        { id: "2", title: "Summarize", toolCategory: "documents" },
      ]}
      totalExecutions={1250}
      isActivated={true}
      onAction={() => console.log("Run workflow")}
    />
  );
}

Props

WorkflowCard

Prop	Type	Default	Description
title	string	-	Workflow title
description	string	-	Workflow description
steps	WorkflowStep[]	-	Array of workflow steps
totalExecutions	number	0	Total execution count
isActivated	boolean	false	Activation status (user variant)
triggerLabel	string	-	Trigger description
variant	"user" \| "explore" \| "suggestion"	"explore"	Card variant
actionLabel	string	-	Custom action button label
isLoading	boolean	false	Show loading spinner
onAction	() => void	-	Action button handler
onClick	() => void	-	Card click handler

WorkflowStep

Property	Type	Description
id	string	Step identifier
title	string	Step title
description	string	Optional description
toolCategory	string	Category for icon/color

Features

Rotated Tool Icons - Eye-catching alternating rotation effect for category icons

Multiple Variants - User (run), explore (create), and suggestion variants

Execution Stats - Display run count with smart formatting (1.2K, 3.5M)

Activation Status - Show active/inactive state for user workflows

Trigger Labels - Display workflow trigger information

Action Buttons - Configurable action buttons with loading states

Category Colors - 10+ predefined categories with distinct color schemes

Usage

import { WorkflowCard } from "@/components/ui/workflow-card";
 
export default function Example() {
  return (
    <WorkflowCard
      title="Email Summary Workflow"
      description="Summarize your daily emails automatically"
      steps={[
        { id: "1", title: "Fetch emails", toolCategory: "email" },
        { id: "2", title: "Summarize", toolCategory: "documents" },
      ]}
      totalExecutions={1250}
      isActivated={true}
      onAction={() => console.log("Run workflow")}
    />
  );
}

Props

WorkflowCard

Prop	Type	Default	Description
title	string	-	Workflow title
description	string	-	Workflow description
steps	WorkflowStep[]	-	Array of workflow steps
totalExecutions	number	0	Total execution count
isActivated	boolean	false	Activation status (user variant)
triggerLabel	string	-	Trigger description
variant	"user" \| "explore" \| "suggestion"	"explore"	Card variant
actionLabel	string	-	Custom action button label
isLoading	boolean	false	Show loading spinner
onAction	() => void	-	Action button handler
onClick	() => void	-	Card click handler

WorkflowStep

Property	Type	Description
id	string	Step identifier
title	string	Step title
description	string	Optional description
toolCategory	string	Category for icon/color

Workflow Card

Daily Engineering Report

Usage in Gaia

Features

Installation

Usage

Props

WorkflowCard

WorkflowStep

Supported Categories

Daily Engineering Report

Usage in Gaia

Features

Installation

Usage

Props

WorkflowCard

WorkflowStep

Supported Categories