Implementation:FlowiseAI Flowise DocumentStoreCard

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

Overview

DocumentStoreCard is a React card component that displays a document store entry with its name, status badge, description, usage statistics (flows, characters, chunks), and associated loader images.

Description

DocumentStoreCard renders a styled MainCard wrapper (CardWrapper) with hover effects and a clickable surface. It displays the document store's name (with 2-line clamping), a DocumentStoreStatus badge, an optional description, and three statistics pills showing the number of associated flows (IconVectorBezier2), total characters (IconLanguage, using kFormatter), and total chunks (IconScissors, using kFormatter). If loader images are provided, up to 3 are shown as circular thumbnails with a "+N More" indicator for additional images. The component supports dark mode styling via the Redux customization state.

Usage

Use DocumentStoreCard in grid or list layouts to represent individual document stores on the Document Store listing page. Pass the document store data object, an optional array of loader image URLs, and an onClick handler for navigation.

Code Reference

Source Location

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

Signature

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

export default DocumentStoreCard

Import

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

I/O Contract

Inputs

Name	Type	Required	Description
data	object	No	Document store object with name, description, status, whereUsed (array), totalChars, and totalChunks properties
images	array	No	Array of image URL strings for the loader icons associated with the document store
onClick	function	No	Click handler invoked when the card is clicked

Outputs

Name	Type	Description
(rendered JSX)	React element	A styled card displaying the document store's name, status, description, statistics pills, and loader images

Usage Examples

Basic Usage

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

const docStore = {
    name: 'Product Knowledge Base',
    description: 'Contains all product documentation',
    status: 'SYNC',
    whereUsed: [{ id: 'flow1' }, { id: 'flow2' }],
    totalChars: 125000,
    totalChunks: 450
}

<DocumentStoreCard
    data={docStore}
    images={['/loaders/pdf.svg', '/loaders/csv.svg']}
    onClick={() => navigate(`/document-stores/${docStore.id}`)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Document_Store_Creation