chore: update README

packages/additional-components/README.md

@@ -1,3 +1,48 @@
-# Vue Flow Additional Components
+# Vue Flow: Additional Components
 
-This package contains additional components like `Background`, `Controls` & `MiniMap`.
+This package contains additional components that can be used with Vue Flow.
+These components include:
+
+- [Background](https://vueflow.dev/guide/components/background)
+- [Controls](https://vueflow.dev/guide/components/controls)
+  - [ControlButton](https://vueflow.dev/guide/components/control-button)
+- [MiniMap](https://vueflow.dev/guide/components/minimap)
+  - [MiniMap Node](https://vueflow.dev/guide/components/minimap-node)
+
+## 🛠 Setup
+
+```bash
+# install
+$ yarn add @vue-flow/additional-components
+
+# or
+$ npm i --save @vue-flow/additional-components
+```
+
+## 🎮 Quickstart
+
+```vue
+
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import initialElements from './initial-elements'
+
+// some nodes and edges
+const elements = ref(initialElements)
+</script>
+<template>
+  <div style="height: 300px">
+    <VueFlow v-model="elements">
+      <!-- Adds a background to your graph. Use variant to specifiy which type of Background to use (lines, dots) -->
+      <Background :variant="BackgroundVariant.Dots" />
+      
+      <!-- Adds zoom/interaction controls to your graph. You can add more buttons by using slots. -->
+      <Controls />
+
+      <!-- Adds a minimap to your graph. -->
+      <MiniMap />
+    </VueFlow>
+  </div>
+</template>
+```