diff --git a/src/types/components.ts b/src/types/components.ts
new file mode 100644
index 00000000..85111e30
--- /dev/null
+++ b/src/types/components.ts
@@ -0,0 +1,58 @@
+import { CSSProperties } from 'vue'
+import { BackgroundVariant, Dimensions, ElementId, FitViewParams, Position, XYPosition } from './flow'
+import { Connection } from './connection'
+import { Node } from '~/types/node'
+
+export type HandleType = 'source' | 'target'
+
+export interface HandleElement extends XYPosition, Dimensions {
+  id?: ElementId | null
+  position: Position
+}
+
+export type ValidConnectionFunc = (connection: Connection) => boolean
+
+export interface BackgroundProps {
+  variant?: BackgroundVariant
+  gap?: number
+  color?: string
+  size?: number
+}
+
+export interface ControlProps {
+  showZoom?: boolean
+  showFitView?: boolean
+  showInteractive?: boolean
+  fitViewParams?: FitViewParams
+}
+
+export interface ControlEvents {
+  (event: 'zoom-in'): void
+  (event: 'zoom-out'): void
+  (event: 'fit-view'): void
+  (event: 'interaction-change', active: boolean): void
+}
+
+export type StringFunc = (node: Node) => string
+export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined
+
+interface MiniMapProps {
+  nodeColor?: string | StringFunc
+  nodeStrokeColor?: string | StringFunc
+  nodeClassName?: string | StringFunc
+  nodeBorderRadius?: number
+  nodeStrokeWidth?: number
+  maskColor?: string
+}
+
+interface MiniMapNodeProps {
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  borderRadius?: number
+  color?: string
+  shapeRendering?: CSSProperties['shapeRendering']
+  strokeColor?: string
+  strokeWidth?: number
+}
diff --git a/src/types/connection.ts b/src/types/connection.ts
index 6c01bce9..3be46d34 100644
--- a/src/types/connection.ts
+++ b/src/types/connection.ts
@@ -1,5 +1,5 @@
 import { ElementId, Position } from './flow'
-import { HandleType } from './handle'
+import { HandleType } from './components'
 
 export enum ConnectionLineType {
   Bezier = 'default',
diff --git a/src/types/handle.ts b/src/types/handle.ts
deleted file mode 100644
index b1e89426..00000000
--- a/src/types/handle.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Dimensions, ElementId, Position, XYPosition } from './flow'
-import { Connection } from './connection'
-
-export type HandleType = 'source' | 'target'
-
-export interface HandleElement extends XYPosition, Dimensions {
-  id?: ElementId | null
-  position: Position
-}
-
-export type ValidConnectionFunc = (connection: Connection) => boolean
diff --git a/src/types/index.ts b/src/types/index.ts
index 58f9efd8..3c31220a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,7 +1,7 @@
 export * from './flow'
 export * from './connection'
 export * from './edge'
-export * from './handle'
+export * from './components'
 export * from './node'
 export * from './zoom'
 export * from './store'
diff --git a/src/types/node.ts b/src/types/node.ts
index f764935c..75c0dc78 100644
--- a/src/types/node.ts
+++ b/src/types/node.ts
@@ -1,6 +1,6 @@
 import { Component, CSSProperties, DefineComponent } from 'vue'
 import { XYPosition, ElementId, Position } from './flow'
-import { HandleElement } from './handle'
+import { HandleElement } from './components'
 
 interface VFInternals {
   position: XYPosition
diff --git a/src/types/store.ts b/src/types/store.ts
index 54572013..28695b29 100644
--- a/src/types/store.ts
+++ b/src/types/store.ts
@@ -12,7 +12,7 @@ import {
   Transform,
   XYPosition,
 } from './flow'
-import { HandleType } from './handle'
+import { HandleType } from './components'
 import {
   ConnectionMode,
   OnConnectEndFunc,