Implementation:FlowiseAI Flowise MainCard
| Knowledge Sources | |
|---|---|
| Domains | UI Components, Card Layout |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
MainCard is a reusable, forwardRef-enabled React card wrapper built on MUI Card that provides consistent card styling with optional title, header actions, divider, and content area across the Flowise UI.
Description
MainCard wraps MUI's Card component using forwardRef for ref forwarding and provides a standardized card layout. It conditionally renders a CardHeader (with regular or dark title variant), a Divider below the header, and a CardContent area with configurable padding and CSS class. The card supports three max-width presets (full, sm, md), optional box shadow on hover, and transparent background by default. When content is false, children are rendered directly without the CardContent wrapper.
Usage
Use MainCard as the standard card container throughout the Flowise UI for any content section that needs a card layout. It serves as the base card component that other specialized cards (ItemCard, DocumentStoreCard) wrap with additional styling.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/ui-component/cards/MainCard.jsx
- Lines: 1-82
Signature
const MainCard = forwardRef(function MainCard(
{ boxShadow, children, content, contentClass, contentSX, darkTitle, maxWidth, secondary, shadow, sx, title, ...others },
ref
) { ... })
export default MainCard
Import
import MainCard from '@/ui-component/cards/MainCard'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| border | bool | No | Whether to show a border on the card |
| boxShadow | bool | No | Enable hover box shadow effect |
| children | node | No | Card body content |
| content | bool | No | Whether to wrap children in CardContent (default: true) |
| contentClass | string | No | CSS class for the CardContent element (default: ) |
| contentSX | object | No | MUI sx styles for CardContent (default: { px: 2, py: 0 }) |
| darkTitle | bool | No | When true, renders title as h3 Typography variant |
| maxWidth | 'full', 'sm', 'md' | No | Max width preset: 'sm'=800px, 'md'=960px, 'full'=1280px (default: 'full') |
| secondary | node, string, or object | No | Action element rendered in the card header's action slot |
| shadow | string | No | Custom box shadow CSS value for hover state |
| sx | object | No | Additional MUI sx styles for the Card |
| title | node, string, or object | No | Card header title content |
Outputs
| Name | Type | Description |
|---|---|---|
| (rendered JSX) | React element | A MUI Card with optional header, divider, and content area |
Usage Examples
Basic Usage
import MainCard from '@/ui-component/cards/MainCard'
// Simple card with title
<MainCard title="Settings" secondary={<Button>Edit</Button>}>
<p>Card content goes here</p>
</MainCard>
// Card without content wrapper
<MainCard content={false} sx={{ p: 2 }}>
<div>Direct children without CardContent wrapper</div>
</MainCard>
// Card with dark title and max width
<MainCard darkTitle title="Dashboard" maxWidth="md" boxShadow>
<DashboardContent />
</MainCard>