diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index f97d65ac..feb8a0e9 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"@preconstruct/next": "^4.0.0",
"@react-flow/core": "11.0.0",
+ "@react-flow/minimap": "11.0.0",
"dagre": "^0.8.5",
"next": "12.2.2",
"react": "18.2.0",
diff --git a/examples/nextjs/pages/CustomNode/index.tsx b/examples/nextjs/pages/CustomNode/index.tsx
index efb878a6..5f6f3d67 100644
--- a/examples/nextjs/pages/CustomNode/index.tsx
+++ b/examples/nextjs/pages/CustomNode/index.tsx
@@ -3,7 +3,6 @@ import { ChangeEvent } from 'react';
import ReactFlow, {
addEdge,
- MiniMap,
Controls,
Node,
ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
import ColorSelectorNode from './ColorSelectorNode';
const onInit = (reactFlowInstance: ReactFlowInstance) => {
diff --git a/examples/nextjs/pages/EdgeTypes/index.tsx b/examples/nextjs/pages/EdgeTypes/index.tsx
index 4540b498..0cf5c2ee 100644
--- a/examples/nextjs/pages/EdgeTypes/index.tsx
+++ b/examples/nextjs/pages/EdgeTypes/index.tsx
@@ -5,7 +5,6 @@ import React from 'react';
import ReactFlow, {
addEdge,
- MiniMap,
Controls,
Background,
ReactFlowInstance,
@@ -14,6 +13,9 @@ import ReactFlow, {
useNodesState,
useEdgesState,
} from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
import { getElements } from './utils';
const onInit = (reactFlowInstance: ReactFlowInstance) => {
diff --git a/examples/nextjs/pages/Edges/index.tsx b/examples/nextjs/pages/Edges/index.tsx
index 3fff29e6..d5b346d5 100644
--- a/examples/nextjs/pages/Edges/index.tsx
+++ b/examples/nextjs/pages/Edges/index.tsx
@@ -7,12 +7,14 @@ import ReactFlow, {
Edge,
EdgeTypes,
MarkerType,
- MiniMap,
Node,
ReactFlowInstance,
useEdgesState,
useNodesState,
} from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
diff --git a/examples/nextjs/pages/Hidden/index.tsx b/examples/nextjs/pages/Hidden/index.tsx
index faa42588..84b530d1 100644
--- a/examples/nextjs/pages/Hidden/index.tsx
+++ b/examples/nextjs/pages/Hidden/index.tsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect, useCallback } from 'react';
import ReactFlow, {
addEdge,
- MiniMap,
Controls,
Connection,
Edge,
@@ -11,6 +10,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
const initialNodes: Node[] = [
{
id: '1',
diff --git a/examples/nextjs/pages/Interaction/index.tsx b/examples/nextjs/pages/Interaction/index.tsx
index 8b31494f..523c6950 100644
--- a/examples/nextjs/pages/Interaction/index.tsx
+++ b/examples/nextjs/pages/Interaction/index.tsx
@@ -5,7 +5,6 @@ import React, {
} from 'react';
import ReactFlow, {
addEdge,
- MiniMap,
Controls,
Node,
Connection,
@@ -16,6 +15,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
const initialNodes: Node[] = [
{
id: '1',
diff --git a/examples/nextjs/pages/NestedNodes/index.tsx b/examples/nextjs/pages/NestedNodes/index.tsx
index e39a115d..3e0edf16 100644
--- a/examples/nextjs/pages/NestedNodes/index.tsx
+++ b/examples/nextjs/pages/NestedNodes/index.tsx
@@ -5,7 +5,6 @@ import ReactFlow, {
Background,
useNodesState,
useEdgesState,
- MiniMap,
Controls,
Node,
Edge,
@@ -13,6 +12,8 @@ import ReactFlow, {
Connection,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
diff --git a/examples/nextjs/pages/Overview/index.tsx b/examples/nextjs/pages/Overview/index.tsx
index 6a2e59b7..10783b2b 100644
--- a/examples/nextjs/pages/Overview/index.tsx
+++ b/examples/nextjs/pages/Overview/index.tsx
@@ -6,7 +6,6 @@ import React, {
import ReactFlow, {
addEdge,
- MiniMap,
Controls,
Background,
Node,
@@ -20,6 +19,8 @@ import ReactFlow, {
OnSelectionChangeParams,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
console.log('drag start', node, nodes);
const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
diff --git a/examples/nextjs/pages/Stress/index.tsx b/examples/nextjs/pages/Stress/index.tsx
index 582e5a86..d834b799 100644
--- a/examples/nextjs/pages/Stress/index.tsx
+++ b/examples/nextjs/pages/Stress/index.tsx
@@ -1,6 +1,5 @@
import React, { useState, CSSProperties, useCallback } from 'react';
import ReactFlow, {
- MiniMap,
Controls,
Background,
ReactFlowInstance,
@@ -14,6 +13,8 @@ import ReactFlow, {
EdgeChange,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
import { getNodesAndEdges } from './utils';
const buttonWrapperStyles: CSSProperties = {
diff --git a/examples/nextjs/pages/Subflow/index.tsx b/examples/nextjs/pages/Subflow/index.tsx
index 4e3a9c3b..85a34564 100644
--- a/examples/nextjs/pages/Subflow/index.tsx
+++ b/examples/nextjs/pages/Subflow/index.tsx
@@ -3,7 +3,6 @@ import React, { useState, MouseEvent, useCallback } from 'react';
import ReactFlow, {
addEdge,
Background,
- MiniMap,
Controls,
Node,
Edge,
@@ -13,6 +12,9 @@ import ReactFlow, {
useNodesState,
useEdgesState,
} from '@react-flow/core';
+
+import MiniMap from '@react-flow/minimap';
+
import DebugNode from './DebugNode';
const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
diff --git a/examples/nextjs/pages/UseReactFlow/index.tsx b/examples/nextjs/pages/UseReactFlow/index.tsx
index 49a90547..6a53af5f 100644
--- a/examples/nextjs/pages/UseReactFlow/index.tsx
+++ b/examples/nextjs/pages/UseReactFlow/index.tsx
@@ -4,7 +4,6 @@ import ReactFlow, {
Node,
addEdge,
Background,
- MiniMap,
useReactFlow,
ReactFlowProvider,
Connection,
@@ -13,6 +12,8 @@ import ReactFlow, {
useEdgesState,
} from '@react-flow/core';
+import MiniMap from '@react-flow/minimap';
+
const initialNodes: Node[] = [
{
id: '1',
diff --git a/examples/nextjs/pages/index.tsx b/examples/nextjs/pages/index.tsx
index cc80aba6..f010b317 100755
--- a/examples/nextjs/pages/index.tsx
+++ b/examples/nextjs/pages/index.tsx
@@ -9,6 +9,8 @@ import ReactFlow, {
useReactFlow,
} from '@react-flow/core';
+import Minimap from '@react-flow/minimap';
+
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
@@ -93,6 +95,7 @@ const BasicFlow = () => {
selectNodesOnDrag={false}
>