VisualFlowBuilt-In components
Beginner · 1 min read · Updated Nov 6, 2026
React Flow provides several built-in components that make it easier to create interactive workflow editors, node-based applications, and visual diagrams. These components enhance canvas navigation, improve diagram readability, and provide additional user interface elements without requiring custom implementations.
import { ReactFlow, MiniMap, Controls, Background, Panel } from '@xyflow/react';
<ReactFlow>
<MiniMap />
<Controls />
<Background />
<Panel position="top-left">
<h1>My Flow</h1>
</Panel>
</ReactFlow>
Mindmap
The React Flow MiniMap component provides a bird's-eye view of your entire flow diagram. It helps users navigate large workflows by displaying all nodes in a compact overview. You can also customize node colors to represent different node types or workflow states.
import { ReactFlow, MiniMap } from '@xyflow/react';
export default function App() {
return (
<div style={{ width: '100%', height: '500px' }}>
<ReactFlow nodes={nodes} edges={edges}>
<MiniMap
nodeColor={(node) => {
if (node.type === 'input') return '#6366f1';
if (node.type === 'output') return '#22c55e';
return '#94a3b8';
}}
zoomable
pannable
/>
</ReactFlow>
</div>
);
}
Controls
The React Flow Controls component adds built-in viewport controls to your canvas. Users can zoom in, zoom out, fit the entire flow into view, and toggle interactive features such as dragging, selecting, and editing nodes.
import { ReactFlow, Controls } from '@xyflow/react';
export default function App() {
return (
<div style={{ width: '100%', height: '500px' }}>
<ReactFlow nodes={nodes} edges={edges}>
<Controls
showZoom
showFitView
showInteractive
/>
</ReactFlow>
</div>
);
}
Background
The React Flow Background component adds a visual pattern to the canvas, helping users maintain alignment and orientation while building workflows. You can choose between dots, lines, and cross patterns to match your application's design.
import {
ReactFlow,
Background,
BackgroundVariant,
} from '@xyflow/react';
export default function App() {
return (
<div style={{ width: '100%', height: '500px' }}>
<ReactFlow nodes={nodes} edges={edges}>
<Background
variant={BackgroundVariant.Dots}
gap={20}
size={1}
color="#94a3b8"
/>
</ReactFlow>
</div>
);
}
Panel
The React Flow Panel component allows you to place fixed UI elements directly inside the flow canvas. It is useful for displaying workflow titles, action buttons, status indicators, search fields, and custom toolbars.
import { ReactFlow, Panel } from '@xyflow/react';
export default function App() {
return (
<div style={{ width: '100%', height: '500px' }}>
<ReactFlow nodes={nodes} edges={edges}>
<Panel position="top-left">
<h3>My Workflow</h3>
<button>Save Flow</button>
</Panel>
<Panel position="bottom-right">
<span>Workflow Editor</span>
</Panel>
</ReactFlow>
</div>
);
}