Skip to main content
The Workflow Card visualizes agentic workflows with eye-catching rotated tool icons, execution statistics, and configurable action buttons. Perfect for automation interfaces and workflow galleries.

​
Preview

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}
      onAction={() => console.log("Create workflow")}
    />
  );
}

​
Installation

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

​
Usage

​
Basic Workflow (Explore)

import { WorkflowCard } from "@/components/ui/workflow-card";

<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}
  onAction={() => console.log("Create workflow")}
/>

​
User’s Active Workflow

<WorkflowCard
  variant="user"
  title="Daily News Digest"
  description="Compile and summarize top tech news"
  steps={[
    { id: "1", title: "Search news", toolCategory: "search" },
    { id: "2", title: "Summarize", toolCategory: "documents" },
    { id: "3", title: "Send email", toolCategory: "email" },
  ]}
  totalExecutions={3450}
  isActivated={true}
  triggerLabel="Every morning at 8 AM"
  onAction={() => console.log("Run workflow")}
/>

​
Clickable Card

<WorkflowCard
  title="Task Automation"
  steps={[
    { id: "1", title: "Create task", toolCategory: "productivity" },
  ]}
  onClick={() => router.push('/workflows/123')}
  onAction={() => console.log("Quick action")}
/>

​
With Loading State

<WorkflowCard
  title="Processing Workflow"
  steps={steps}
  isLoading={true}
  onAction={() => {}}
/>

​
Props

​
title
string
required
Workflow title displayed prominently at the top
​
description
string
Brief description of what the workflow does. Displayed below the title.
​
steps
WorkflowStep[]
required
Array of workflow steps that determine the tool icons displayed
​
totalExecutions
number
default:"0"
Total number of times this workflow has been executed. Automatically formatted (1.2K, 3.5M).
​
isActivated
boolean
default:"false"
Whether the workflow is currently active (only shown in user variant)
​
triggerLabel
string
Display text for the workflow trigger (e.g., “Every morning at 8 AM”)
​
variant
'user' | 'explore' | 'suggestion'
default:"'explore'"
Card variant that determines appearance and behavior:
  • user: Shows activation status, “Run” button
  • explore: Default discovery mode, “Create” button
  • suggestion: Recommended workflows
​
actionLabel
string
Custom label for the action button. Defaults to “Run” (user) or “Create” (explore/suggestion).
​
isLoading
boolean
default:"false"
Shows loading spinner in the action button when true
​
onAction
() => void
Callback when the action button is clicked
​
onClick
() => void
Callback when the card itself is clicked. Enables hover states.
​
showDescriptionAsTooltip
boolean
default:"false"
When true, shows description in tooltip instead of inline
​
className
string
Additional CSS classes to apply to the card
​
categoryConfig
Record<string, ToolCategoryConfig>
Custom category configurations to override default icons and colors

​
Supported Categories

The component includes built-in styling for these tool categories:
  • productivity - Emerald green for task and project management tools
  • documents - Orange for document processing and editing
  • development - Cyan for developer tools and APIs
  • memory - Indigo for knowledge management and storage
  • creative - Pink for design and creative tools
  • goal_tracking - Emerald for goal and habit tracking
  • notifications - Yellow for messaging and alerts
  • email - Blue for email and communication
  • calendar - Purple for scheduling and time management
  • search - Teal for search and discovery tools
  • general - Gray fallback for uncategorized tools
Each category has a unique background color and icon color that creates a cohesive visual system.

​
Features

​
Rotated Tool Icons

The signature visual feature: tool category icons are displayed with an alternating rotation effect (±8 degrees) that creates an eye-catching, dynamic appearance. Icons overlap slightly with proper z-index stacking.

​
Multiple Variants

  • User: For workflows owned by the user, showing activation status and run counts
  • Explore: For browsing available workflows in a gallery
  • Suggestion: For recommended workflows based on user behavior

​
Execution Count Formatting

Counts are automatically formatted:
  • 1,250 → “1.2K runs”
  • 3,500,000 → “3.5M runs”

​
Smart Icon Display

Shows up to 3 unique category icons with a “+N” indicator if there are more. Duplicate categories are automatically deduplicated.

​
Activation Status Badge

In user variant, shows a green “Active” or gray “Inactive” badge to indicate workflow status.

​
Action Buttons

Configurable action buttons with:
  • Loading states with spinning icon
  • Click event propagation handling
  • Theme-aware styling (solid blue for explore, flat for user)

​
Dark Mode Support

Fully adapts to dark mode with appropriate contrast ratios and color adjustments.

​
Usage in Gaia

The Workflow Card is the core component of Gaia’s automation interface, visualizing agentic workflows and their status throughout the platform. It’s used in:
  • Workflow galleries and discovery pages
  • User’s workflow dashboard
  • Workflow suggestions and recommendations
  • Search results for automation templates

​
Accessibility

  • Proper button semantics with role and tabIndex
  • Keyboard navigation support (Enter and Space keys)
  • Action button clicks don’t trigger card click
  • ARIA labels on icon elements
  • Visual focus indicators
The component uses a maximum of 3 category icons for visual clarity. If your workflow has more tool categories, they’ll be indicated with a “+N” badge.

Build docs developers (and LLMs) love

Get started for freeTalk to us