Implementation:FlowiseAI Flowise ItemCard

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Card Layout
Last Updated	2026-02-12 07:00 GMT

Overview

ItemCard is a general-purpose React card component used to display chatflows, agentflows, tools, and marketplace templates with their name, optional icon, description, and associated node images or icons.

Description

ItemCard renders a styled MainCard wrapper (CardWrapper) with hover effects and a clickable surface. It displays an optional icon (either from data.iconSrc as a background image or data.color as a solid circle), the item's name (or templateName), and an optional description with 3-line clamping. At the bottom, it renders up to 3 node images or icons with tooltips, and a "+N More" indicator (via MoreItemsTooltip) if additional items exist. The component supports both image-type items and icon-type items (React icon components with colors) in a unified display.

Usage

Use ItemCard in grid or list layouts to represent chatflows, agentflows, tools, or marketplace templates. Pass the item data object, optional arrays of images and icons, and an onClick handler for navigation.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/ui-component/cards/ItemCard.jsx
• Lines: 1-193

Signature

const ItemCard = ({ data, images, icons, onClick }) => { ... }

export default ItemCard

Import

import ItemCard from '@/ui-component/cards/ItemCard'

I/O Contract

Inputs

Name	Type	Required	Description
data	object	No	Item object with name (or templateName), description, iconSrc, and color properties
images	array	No	Array of objects with imageSrc and label properties representing node images
icons	array	No	Array of objects with icon (React component), color, and name properties representing node icons
onClick	function	No	Click handler invoked when the card is clicked

Outputs

Name	Type	Description
(rendered JSX)	React element	A styled card displaying the item's icon, name, description, and associated node images/icons with tooltips

Usage Examples

Basic Usage

import ItemCard from '@/ui-component/cards/ItemCard'

const chatflow = {
    name: 'Customer Support Bot',
    description: 'A chatflow for handling customer queries',
    iconSrc: '/icons/chatbot.svg'
}

const nodeImages = [
    { imageSrc: '/nodes/openai.svg', label: 'OpenAI' },
    { imageSrc: '/nodes/pinecone.svg', label: 'Pinecone' }
]

<ItemCard
    data={chatflow}
    images={nodeImages}
    onClick={() => navigate(`/chatflows/${chatflow.id}`)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Flow_Management