diff --git a/docs/.vitepress/assets/index.css b/docs/.vitepress/assets/index.css
new file mode 100644
index 00000000..c38a6bf7
--- /dev/null
+++ b/docs/.vitepress/assets/index.css
@@ -0,0 +1,164 @@
+html,
+body {
+  position: relative;
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  color: #111;
+  /* background-color: #31475e;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url('./polygon-scatter.svg');
+   */
+}
+
+.backround-img {
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url('./polygon-scatter.svg');
+}
+
+.overview-example__add {
+  display: none;
+}
+
+.vue-flow__node a {
+  font-weight: 700;
+  color: #111;
+}
+
+.vue-flow__node.dark-node {
+  background: #0041d0;
+  color: #f8f8f8;
+}
+
+.vue-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
+.vue-flow__node-selector {
+  font-size: 14px;
+  background: #f0f2f3;
+  border: 1px solid #555;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.vue-flow__node-selector .vue-flow__handle {
+  border-color: #f0f2f3;
+}
+
+@media screen and (min-width: 768px) {
+  .overview-example__add {
+    display: block;
+  }
+}
+
+.font-mono {
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#vue-flow-examples {
+  width: calc(100% - 280px);
+  overflow: scroll;
+  @apply flex m-0 flex-col uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+.vue-flow {
+  @apply bg-white h-[80vh];
+}
+
+.description {
+  @apply p-0 md:p-6 text-left gap-2 flex flex-col justify-center items-center text-white normal-case leading-tight md:leading-normal;
+
+.content {
+  @apply w-full md:w-5/6 xl:w-11/12 p-6 md:rounded-xl;
+}
+}
+}
+
+#vue-flow-docs {
+  @apply flex m-0 p-0 lg:p-6 bg-gray-800 text-white overflow-scroll max-w-full;
+}
+
+#vue-flow-docs, #vue-flow-examples,
+.home-page {
+a {
+  @apply text-green-500 font-semibold hover:text-green-300;
+}
+}
+
+h1 {
+  @apply text-xl lg:text-4xl mb-4 font-bold;
+}
+
+h2 {
+  @apply text-lg lg:text-2xl mb-4 font-semibold;
+}
+
+p {
+  @apply text-md lg:text-lg font-qtype;
+}
+
+p ~ h1, p ~ h2 {
+  @apply mt-6;
+}
+
+ul {
+  @apply md:p-[revert];
+}
+
+li {
+  @apply mt-2 text-md lg:text-lg;
+  list-style: inside;
+  list-style-type: circle;
+}
+
+.button {
+  @apply bg-gray-200 hover:bg-gray-300 focus:outline-none font-bold mr-2 border-2 p-2 rounded-xl;
+}
+
+.md {
+  @apply prose prose-sm m-auto text-left flex flex-col gap-4;
+}
+
+.attention-box {
+  @apply text-gray-800 p-4 bg-yellow-300 rounded-xl mb-4;
+
+.title {
+  @apply text-lg font-bold;
+}
+}
+
+.demo-flow {
+  @apply bg-white border-1 solid border-gray-300 rounded-xl;
+}
+
+pre {
+  @apply !text-xs !md:text-lg;
+}
+
+.slider {
+  --color: red;
+  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  -webkit-appearance: none;
+  appearance: none;
+
+&::-moz-range-thumb {
+   @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+   -webkit-appearance: none;
+   background: var(--color);
+ }
+&::-webkit-slider-thumb {
+   @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+   -webkit-appearance: none;
+   background: var(--color);
+ }
+}
diff --git a/docs/.vitepress/assets/polygon-scatter.svg b/docs/.vitepress/assets/polygon-scatter.svg
new file mode 100644
index 00000000..5b07c11f
--- /dev/null
+++ b/docs/.vitepress/assets/polygon-scatter.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>
\ No newline at end of file
diff --git a/docs/.vitepress/components/Demo.vue b/docs/.vitepress/components/demo/Demo.vue
similarity index 100%
rename from docs/.vitepress/components/Demo.vue
rename to docs/.vitepress/components/demo/Demo.vue
diff --git a/docs/.vitepress/components/home/Basic.vue b/docs/.vitepress/components/home/Basic.vue
new file mode 100644
index 00000000..22c1b87f
--- /dev/null
+++ b/docs/.vitepress/components/home/Basic.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VueFlow, Background, Elements, isNode, MarkerType, useVueFlow } from '@braks/vue-flow'
+
+const elements = ref<Elements>([
+  { id: '1', type: 'input', label: 'Input Node', position: { x: 250, y: 15 } },
+  { id: '2', label: 'Default Node', position: { x: 100, y: 150 } },
+  { id: '3', label: 'Default Node', position: { x: 400, y: 150 } },
+  { id: '4', type: 'button', position: { x: 240, y: 300 }, style: { borderRadius: '50%' } },
+  { id: 'e1-2', type: 'step', source: '1', target: '2', markerEnd: MarkerType.Arrow },
+  { id: 'e2-4', type: 'smoothstep', source: '2', target: '4', animated: true, style: { strokeWidth: 2, stroke: '#3b82f6' } },
+  { id: 'e3-4', type: 'smoothstep', source: '3', target: '4', animated: true, style: { strokeWidth: 2, stroke: '#3b82f6' } },
+  { id: 'e1-3', type: 'step', source: '1', target: '3', markerEnd: MarkerType.Arrow },
+])
+
+const { onConnect, onPaneReady, addEdges } = useVueFlow()
+onConnect((connection) => addEdges([connection]))
+onPaneReady(({ fitView }) => {
+  fitView({ padding: 0.3, offset: { y: 30 } })
+})
+
+const toggleClassnames = () => {
+  elements.value = elements.value.map((el) => {
+    if (isNode(el)) el.class = el.class === 'dark' ? 'light' : 'dark'
+    return el
+  })
+}
+</script>
+<template>
+  <div class="relative w-[100vw] h-[80vh] flex flex-col-reverse md:flex-row font-mono border-1 border-white bg-white">
+    <div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
+      <h1 class="pointer-events-none text-xl lg:text-4xl">Easy to use</h1>
+      <h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
+        Getting started is simple. All you need are some <strong>elements</strong> and you're ready to go.
+        <span class="font-bold">Each element needs a unique id.</span> A node also needs a <strong>position (x and y)</strong>. An
+        edge needs <strong>a source and a target</strong>.
+      </h2>
+      <div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
+        <a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
+          Documentation
+        </a>
+        <a
+          class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
+          href="/examples"
+        >
+          Examples
+        </a>
+      </div>
+    </div>
+    <VueFlow
+      id="basic-flow"
+      v-model="elements"
+      class="vue-flow-basic-example"
+      :default-zoom="1.5"
+      :min-zoom="0.2"
+      :max-zoom="4"
+      :zoom-on-scroll="false"
+    >
+      <Background variant="dots" color="black" />
+      <template #node-button>
+        <slot></slot>
+      </template>
+      <div class="absolute right-[10px] top-[10px] z-4">
+        <button class="button" @click="toggleClassnames">toggle class</button>
+      </div>
+    </VueFlow>
+  </div>
+</template>
+<style>
+.vue-flow__node.dark {
+  @apply !bg-black;
+}
+</style>
diff --git a/docs/.vitepress/components/home/Features.vue b/docs/.vitepress/components/home/Features.vue
new file mode 100644
index 00000000..0a664e2f
--- /dev/null
+++ b/docs/.vitepress/components/home/Features.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VueFlow, MiniMap, Background, Controls, Elements, MarkerType, FlowEvents } from '@braks/vue-flow'
+
+interface Props {
+  next: (node: string[], duration: number) => void
+}
+const props = defineProps<Props>()
+
+const elements = ref<Elements>([
+  { id: '1', type: 'input', label: 'Back To The Start', position: { x: 200, y: 0 } },
+  { id: '2', label: 'Node 2', position: { x: 0, y: 130 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 130 } },
+  { id: 'e1-2', source: '1', target: '2', markerEnd: MarkerType.Arrow },
+  { id: 'e1-3', source: '1', target: '3', markerEnd: MarkerType.Arrow },
+])
+
+const onLoad = ({ fitView }) => fitView({ padding: 0.5 })
+const onNodeClick = ({ node }: FlowEvents['nodeClick']) => {
+  if (node.type === 'input') props.next(['intro', 'examples', 'tour', 'documentation'], 4000)
+}
+</script>
+<template>
+  <div
+    ref="page"
+    class="!pointer-events-auto font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]"
+    :style="{ borderRadius: 0 }"
+  >
+    <VueFlow
+      id="features-flow"
+      v-model="elements"
+      class="relative font-mono"
+      :pane-moveable="true"
+      @pane-ready="onLoad"
+      @node-click="onNodeClick"
+    >
+      <Controls />
+      <Background />
+      <MiniMap />
+    </VueFlow>
+    <div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
+      <h1 class="pointer-events-none text-xl lg:text-4xl">Everything you need</h1>
+      <h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
+        Vue Flow ships with a <strong>Minimap-, Background- and Controls-Component</strong>. On top of that we add
+        <strong>Zoom & Pan utilities</strong> with which you can create the exact same transitions that are used on this site!
+      </h2>
+      <div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
+        <a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
+          Documentation
+        </a>
+        <a
+          class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
+          href="/examples"
+        >
+          Examples
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/components/home/Home.vue b/docs/.vitepress/components/home/Home.vue
new file mode 100644
index 00000000..581e5b25
--- /dev/null
+++ b/docs/.vitepress/components/home/Home.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VueFlow, Handle, Position, Elements, FlowInstance } from '@braks/vue-flow'
+import { useBreakpoints } from '@vueuse/core'
+import BoxNode from './nodes/Box.vue'
+import RGBFlow from './RGB.vue'
+import BasicFlow from './Basic.vue'
+import FeaturesFlow from './Features.vue'
+
+const breakpoints = useBreakpoints({
+  mobile: 320,
+  tablet: 640,
+  laptop: 1024,
+  desktop: 1280,
+})
+
+const desktop = breakpoints.greater('tablet')
+
+const elements: Elements = [
+  { id: 'intro', type: 'box', position: { x: 480, y: 50 }, draggable: true },
+  { id: 'demo', type: 'box', position: { x: desktop.value ? 1250 : 1150, y: 400 } },
+  { id: 'examples', type: 'box', position: { x: 800, y: 400 } },
+  { id: 'tour', type: 'box', position: { x: 650, y: 550 } },
+  { id: 'documentation', type: 'box', position: { x: 400, y: 400 } },
+  { id: 'github', type: 'box', position: { x: 1100, y: 200 } },
+  { id: 'features', type: 'features', position: { x: 3000, y: 5000 }, style: { cursor: 'default' } },
+  { id: 'rgb', type: 'rgb', position: { x: 3000, y: 2500 }, style: { cursor: 'default' } },
+  { id: 'basic', type: 'basic', position: { x: 250, y: 2500 }, style: { cursor: 'default' } },
+  {
+    id: 'eintro-examples',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'intro',
+    target: 'examples',
+    animated: true,
+    style: { strokeWidth: 2, stroke: '#8b5cf6' },
+  },
+  {
+    id: 'eexamples-tour',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'examples',
+    target: 'tour',
+    animated: true,
+    style: { strokeWidth: 3, stroke: '#3b82f6' },
+  },
+  {
+    id: 'eexamples-demo',
+    type: 'smoothstep',
+    sourceHandle: 'right',
+    source: 'examples',
+    target: 'demo',
+    animated: true,
+    style: { strokeWidth: 2 },
+  },
+  {
+    id: 'edocumentation-tour',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'documentation',
+    target: 'tour',
+    animated: true,
+    style: { strokeWidth: 3, stroke: '#3b82f6' },
+  },
+  {
+    id: 'eintro-documentation',
+    type: 'smoothstep',
+    sourceHandle: 'a',
+    source: 'intro',
+    target: 'documentation',
+    animated: true,
+    style: { strokeWidth: 2, stroke: '#f97316' },
+  },
+  {
+    id: 'eintro-github',
+    sourceHandle: 'b',
+    source: 'intro',
+    target: 'github',
+    animated: true,
+    style: { strokeWidth: 2 },
+  },
+  {
+    id: 'etour-basic',
+    targetHandle: 'basic-b',
+    source: 'tour',
+    target: 'basic',
+    animated: true,
+    style: { strokeWidth: 3, stroke: '#3b82f6' },
+  },
+  {
+    id: 'ebasic-rgb',
+    targetHandle: 'rgb-a',
+    sourceHandle: 'basic-a',
+    source: 'basic',
+    target: 'rgb',
+    animated: true,
+    style: { strokeWidth: 3, stroke: '#3b82f6' },
+  },
+  {
+    id: 'ergb-features',
+    targetHandle: 'features-a',
+    sourceHandle: 'rgb-b',
+    source: 'rgb',
+    target: 'basic',
+    animated: true,
+    style: { strokeWidth: 3, stroke: '#3b82f6' },
+  },
+]
+const instance = ref<FlowInstance>()
+const onLoad = (i: FlowInstance) => {
+  instance.value = i
+  setTimeout(() => {
+    i.fitView({
+      nodes: ['intro', 'examples', 'tour', 'documentation'],
+      padding: 0.2,
+      offset: { x: !desktop.value ? -10 : -50 },
+      duration: 1500,
+    })
+  })
+}
+const nextNode = (id: string[], duration = 2000, padding = 0) => instance.value.fitView({ padding, nodes: id, duration })
+</script>
+<template>
+  <div class="home-page">
+    <div class="flex h-[60vh] md:h-[80vh] w-full gap-4" style="border-radius: 0">
+      <VueFlow
+        v-model="elements"
+        :elements-selectable="true"
+        :nodes-draggable="false"
+        :pane-moveable="false"
+        :zoom-on-scroll="false"
+        @pane-ready="onLoad"
+      >
+        <template #node-features>
+          <FeaturesFlow :next="nextNode" />
+          <Handle id="features-a" type="target" :position="Position.Top" />
+        </template>
+        <template #node-basic>
+          <BasicFlow>
+            <button
+              class="
+                flex flex-row
+                gap-3
+                items-center
+                p-4
+                shadow-lg
+                hover:bg-black
+                dark:(bg-black) dark:hover:bg-blue-500
+                bg-blue-500
+                rounded-xl
+                !text-white
+                font-semibold
+                text-lg
+              "
+              @click="nextNode(['rgb'], 3500)"
+            >
+              <i class="icon-sm icon-heart !text-red-300" />Continue Demo
+            </button>
+            <Handle type="target" :position="Position.Top" />
+          </BasicFlow>
+          <Handle id="basic-a" type="source" :position="Position.Right" />
+          <Handle id="basic-b" type="target" :position="Position.Top" />
+        </template>
+        <template #node-rgb>
+          <RGBFlow :next="nextNode" />
+          <Handle id="rgb-a" type="target" :position="Position.Left" />
+          <Handle id="rgb-b" type="source" :position="Position.Bottom" />
+        </template>
+        <template #node-box="props">
+          {{ props }}
+          <template v-if="props.id === 'intro'">
+            <div class="max-w-[500px]">
+              <BoxNode class="bg-green-500 text-white">
+                <div class="font-mono flex flex-col gap-4 p-4 items-center">
+                  <h1 class="pointer-events-none text-2xl lg:text-4xl">Visualize your ideas with Vue Flow</h1>
+                  <h2 class="pointer-events-none text-lg lg:text-xl font-normal">
+                    A customizable Vue.js library for building node-based editors and diagrams.
+                  </h2>
+                </div>
+              </BoxNode>
+            </div>
+          </template>
+          <template v-else-if="props.id === 'documentation'">
+            <div class="flex">
+              <a
+                class="
+                  flex flex-row
+                  gap-3
+                  items-center
+                  p-4
+                  shadow-lg
+                  bg-orange-500
+                  hover:bg-black
+                  rounded-xl
+                  !text-white
+                  font-semibold
+                  text-lg
+                "
+                href="/docs"
+              >
+                <i class="icon-sm icon-file-document !text-blue-700" />Read The Documentation
+              </a>
+            </div>
+            <Handle type="target" :position="Position.Top" />
+            <Handle type="source" :position="Position.Bottom" />
+          </template>
+          <template v-else-if="props.id === 'tour'">
+            <button
+              class="
+                flex flex-row
+                gap-3
+                items-center
+                p-4
+                shadow-lg
+                hover:bg-black
+                bg-blue-500
+                rounded-xl
+                !text-white
+                font-semibold
+                text-lg
+              "
+              @click="nextNode(['basic'])"
+            >
+              <i class="icon-sm icon-heart !text-red-300" />Start the Tour
+            </button>
+            <Handle type="target" :position="Position.Top" />
+            <Handle type="source" :position="Position.Bottom" />
+          </template>
+          <template v-else-if="props.id === 'demo'">
+            <a
+              class="
+                flex flex-row
+                gap-3
+                items-center
+                p-4
+                shadow-lg
+                hover:bg-black
+                bg-pink-400
+                rounded-xl
+                !text-white
+                font-semibold
+                text-lg
+              "
+              href="/examples/playground"
+            >
+              <i class="icon-sm icon-toolbox !text-blue-700" />Playground
+            </a>
+            <Handle type="target" :position="Position.Left" />
+          </template>
+          <template v-else-if="props.id === 'examples'">
+            <div class="flex">
+              <a
+                class="
+                  flex flex-row
+                  gap-3
+                  items-center
+                  p-4
+                  shadow-lg
+                  hover:bg-black
+                  bg-purple-500
+                  rounded-xl
+                  !text-white
+                  font-semibold
+                  text-lg
+                "
+                href="/examples"
+              >
+                <i class="icon-sun icon-sm !text-yellow-300" />Check The Examples
+              </a>
+            </div>
+            <Handle type="target" :position="Position.Top" />
+            <Handle type="source" :position="Position.Bottom" />
+            <Handle type="source" id="right" :position="Position.Right" />
+          </template>
+          <template v-else-if="props.id === 'github'">
+            <div class="flex">
+              <a
+                class="
+                  flex flex-row
+                  items-center
+                  gap-3
+                  p-4
+                  bg-black
+                  rounded-xl
+                  !text-white
+                  hover:(bg-white
+                  border-1 border-black
+                  !text-black)
+                  text-lg
+                "
+                href="https://github.com/bcakmakoglu/vue-flow"
+                target="_blank"
+              >
+                <i class="icon-sm icon-git-branch" />Github
+              </a>
+            </div>
+            <Handle type="target" :position="Position.Left" />
+          </template>
+        </template>
+      </VueFlow>
+    </div>
+  </div>
+</template>
+<style scoped>
+a {
+  @apply text-green-500 font-semibold hover:text-green-300;
+}
+button:focus {
+  outline: none;
+}
+</style>
diff --git a/docs/.vitepress/components/home/RGB.vue b/docs/.vitepress/components/home/RGB.vue
new file mode 100644
index 00000000..2d2558e0
--- /dev/null
+++ b/docs/.vitepress/components/home/RGB.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Elements, FlowInstance, VueFlow, Background, Controls, MiniMap, BackgroundVariant } from '@braks/vue-flow'
+import { templateRef, useBreakpoints, useElementBounding, whenever } from '@vueuse/core'
+import CustomEdge from './edges/Custom.vue'
+import RGBNode from './nodes/Input.vue'
+import RGBOutputNode from './nodes/Output.vue'
+
+type Colors = {
+  red: number
+  green: number
+  blue: number
+}
+
+interface Props {
+  next: (node: string[], duration?: number, padding?: number) => void
+}
+const props = defineProps<Props>()
+
+const breakpoints = useBreakpoints({
+  mobile: 360,
+  tablet: 640,
+  laptop: 1024,
+  desktop: 1280,
+})
+
+const elements = ref<Elements>([
+  { id: '1', type: 'rgb', data: { color: 'g' }, position: { x: -25, y: 50 } },
+  { id: '2', type: 'rgb', data: { color: 'r' }, position: { x: 50, y: -100 } },
+  { id: '3', type: 'rgb', data: { color: 'b' }, position: { x: 0, y: 200 } },
+  { id: '4', type: 'rgb-output', label: 'RGB', position: { x: 400, y: 50 } },
+  { id: 'e1-4', type: 'rgb-line', data: { color: 'green' }, source: '1', target: '4', animated: true },
+  { id: 'e2-4', type: 'rgb-line', data: { color: 'red' }, source: '2', target: '4', animated: true },
+  { id: 'e3-4', type: 'rgb-line', data: { color: 'blue' }, source: '3', target: '4', animated: true },
+])
+const instance = ref<FlowInstance>()
+
+const el = templateRef<HTMLDivElement>('page', null)
+
+const bounds = useElementBounding(el)
+const onLoad = (flowInstance: FlowInstance) => {
+  instance.value = flowInstance
+  if (breakpoints.greater('tablet').value) flowInstance.fitView({ padding: 0.5 })
+  else flowInstance.fitView()
+}
+whenever(breakpoints.greater('tablet'), () => onLoad(instance.value))
+whenever(breakpoints.smaller('tablet'), () => onLoad(instance.value))
+
+const color = ref<Colors>({
+  red: 100,
+  green: 150,
+  blue: 100,
+})
+const onChange = ({ color: c, val }: { color: keyof Colors; val: number }) => (color.value[c] = Number(val))
+const bg = ref(BackgroundVariant.Lines)
+const bgSize = ref(1)
+const bgGap = ref(48)
+const backgroundChange = (variant: BackgroundVariant) => (bg.value = variant)
+const sizeChange = (size: number) => (bgSize.value = size)
+</script>
+<template>
+  <div ref="page" class="font-mono flex flex flex-col md:flex-row bg-white w-[100vw] h-[80vh]" :style="{ borderRadius: 0 }">
+    <VueFlow id="rgb-flow" v-model="elements" class="relative font-mono" :zoom-on-scroll="false" @pane-ready="onLoad">
+      <template #edge-rgb-line="rgbLineProps">
+        <CustomEdge v-bind="{ ...rgbLineProps }" />
+      </template>
+      <template #node-rgb="rgbProps">
+        <RGBNode v-bind="rgbProps" :amount="color" @change="onChange" />
+      </template>
+      <template #node-rgb-output="rgbOutputProps">
+        <RGBOutputNode
+          v-bind="rgbOutputProps"
+          :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`"
+          @next="props.next(['features'], 3500)"
+        />
+      </template>
+      <Controls />
+      <Background :variant="bg" :color="`rgb(${color.red}, ${color.green}, ${color.blue})`" :gap="bgGap" :size="bgSize" />
+      <MiniMap />
+    </VueFlow>
+    <div class="flex bg-light-800 flex-col justify-center gap-2 md:gap-4 p-6 w-full md:w-1/3">
+      <h1 class="pointer-events-none text-xl lg:text-4xl" :style="{ color: `rgb(${color.red}, ${color.green}, ${color.blue})` }">
+        Highly customizable
+      </h1>
+      <h2 class="pointer-events-none text-sm lg:text-xl text-black font-normal">
+        With Vue Flow you can create the most beautiful <strong>static diagrams</strong> or even <strong>custom editors</strong>.
+        Thanks to a lot of handy utilities that come out of the box, you jump right into <strong>customizing</strong> Vue Flow to
+        your hearts desire and utilize the <strong>seamless zoom & panning</strong> feature.
+      </h2>
+      <div class="!pointer-events-auto transform scale-75 lg:scale-100 flex flex-row justify-center items-center gap-4">
+        <a class="p-4 bg-green-500 hover:bg-black rounded-xl !text-white font-semibold text-lg" href="/docs">
+          Documentation
+        </a>
+        <a
+          class="!pointer-events-auto p-4 bg-white hover:bg-black rounded-xl bg-blue-500 !text-white font-semibold text-lg"
+          href="/examples"
+        >
+          Examples
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/components/home/edges/Custom.vue b/docs/.vitepress/components/home/edges/Custom.vue
new file mode 100644
index 00000000..e8afcac6
--- /dev/null
+++ b/docs/.vitepress/components/home/edges/Custom.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { MarkerType, getBezierPath, Position, EdgeProps } from '@braks/vue-flow'
+
+interface CustomEdgeProps extends EdgeProps {
+  source: string
+  target: string
+  sourceHandleId?: string
+  targetHandleId?: string
+  id: string
+  sourceX: number
+  sourceY: number
+  targetX: number
+  targetY: number
+  sourcePosition: Position
+  targetPosition: Position
+  markerEnd?: MarkerType
+  data?: {
+    text?: string
+    color?: 'red' | 'green' | 'blue'
+  }
+}
+
+const props = defineProps<CustomEdgeProps>()
+const edgePath = computed(() =>
+  getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  }),
+)
+
+console.log(props)
+</script>
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+}
+</script>
+<template>
+  <path
+    :id="props.id"
+    class="vue-flow__edge-path"
+    :style="{ stroke: props.data?.color }"
+    :d="edgePath"
+    :marker-end="props.markerEnd"
+  />
+  <text>
+    <textPath
+      :href="`#${props.id}`"
+      :style="{ fontSize: '12px', fill: props.data?.color }"
+      startOffset="50%"
+      text-anchor="middle"
+    >
+      {{ props.data?.text }}
+    </textPath>
+  </text>
+</template>
diff --git a/docs/.vitepress/components/home/nodes/Box.vue b/docs/.vitepress/components/home/nodes/Box.vue
new file mode 100644
index 00000000..37e4819f
--- /dev/null
+++ b/docs/.vitepress/components/home/nodes/Box.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { Handle, Position } from '@braks/vue-flow'
+
+const emit = defineEmits(['next'])
+</script>
+<template>
+  <div class="px-4 py-2 bg-white shadow-lg rounded-md border-2 border-solid border-black">
+    <slot />
+    <Handle id="a" type="source" :position="Position.Bottom" />
+    <Handle id="b" type="source" :position="Position.Right" />
+  </div>
+</template>
diff --git a/docs/.vitepress/components/home/nodes/Input.vue b/docs/.vitepress/components/home/nodes/Input.vue
new file mode 100644
index 00000000..11a22531
--- /dev/null
+++ b/docs/.vitepress/components/home/nodes/Input.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+
+interface RGBNodeProps extends NodeProps {
+  data: {
+    color: 'r' | 'g' | 'b'
+  }
+  amount: {
+    red: number
+    green: number
+    blue: number
+  }
+}
+const props = defineProps<RGBNodeProps>()
+const emit = defineEmits(['change'])
+let color = 'red'
+switch (props.data?.color) {
+  case 'r':
+    color = 'red'
+    break
+  case 'g':
+    color = 'green'
+    break
+  case 'b':
+    color = 'blue'
+    break
+}
+const onChange = (e: any) => emit('change', { color, val: e.target.value })
+</script>
+<template>
+  <div class="px-4 py-2 bg-white rounded-md border-2 border-solid border-black text-left transform scale-75 lg:scale-100">
+    <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
+    <input
+      v-model="props.amount[color]"
+      class="slider nodrag"
+      :style="{ '--color': color }"
+      type="range"
+      min="0"
+      max="255"
+      @input="onChange"
+    />
+    <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
+  </div>
+</template>
diff --git a/docs/.vitepress/components/home/nodes/Output.vue b/docs/.vitepress/components/home/nodes/Output.vue
new file mode 100644
index 00000000..3ef5dee6
--- /dev/null
+++ b/docs/.vitepress/components/home/nodes/Output.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { Handle, NodeProps, Position } from '@braks/vue-flow'
+interface RBGOutputNodeProps extends NodeProps {
+  rgb: string
+}
+const props = defineProps<RBGOutputNodeProps>()
+const emit = defineEmits(['next'])
+const next = () => emit('next')
+</script>
+<template>
+  <div :style="{ backgroundColor: props.rgb }" class="rgb-output-node" @click="next">
+    <div class="text-md uppercase">{{ props.rgb }}</div>
+    Click me to continue.
+    <Handle type="target" :position="Position.Left" />
+  </div>
+</template>
+<style>
+.rgb-output-node {
+  padding: 9px;
+  border-radius: 25px;
+  text-align: left;
+  color: white;
+}
+</style>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index ee795e52..e7ab6b2d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -2,16 +2,36 @@ import { config } from 'dotenv'
 import { resolve } from 'path'
 import { defineConfig, HeadConfig } from 'vitepress'
 import head from './head'
+import WindiCSS from 'vite-plugin-windicss'
+import Components from 'unplugin-vue-components/vite'
 
 config({ path: resolve(__dirname, '.env') })
 
 export default defineConfig({
   title: 'Vue Flow',
-  description: 'Create node based editors!',
   lastUpdated: true,
   srcDir: './src',
   head: head as HeadConfig[],
 
+  vite: {
+    plugins: [
+      WindiCSS({
+        config: resolve(__dirname, './windi.config.ts'),
+      }) as any,
+      Components({
+        dirs: [
+          resolve(__dirname, './components')
+        ],
+        deep: true,
+        // allow auto load markdown components under `./src/components/`
+        extensions: ['vue', 'md'],
+        // allow auto import and register components used in markdown
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        dts: false,
+      }),
+    ],
+  },
+
   themeConfig: {
     repo: 'bcakmakoglu/vue-flow',
     docsDir: 'docs',
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index c1406ea5..a2162119 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -1,10 +1,10 @@
 import { Theme } from 'vitepress';
 import DefaultTheme from 'vitepress/theme'
-import Demo from '../components/Demo.vue'
+import 'virtual:windi.css'
+import '@braks/vue-flow/dist/style.css'
+import '@braks/vue-flow/dist/theme-default.css'
+import '../assets/index.css'
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
-    app.component('Demo', Demo)
-  }
 } as Theme
diff --git a/docs/.vitepress/windi.config.ts b/docs/.vitepress/windi.config.ts
new file mode 100644
index 00000000..b48b7748
--- /dev/null
+++ b/docs/.vitepress/windi.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'windicss/helpers'
+import { resolve } from 'path'
+
+export default defineConfig({
+  extract: {
+    include: [
+      resolve(__dirname, 'components/**/*.{ts,md,vue}')
+    ],
+  },
+  attributify: true,
+})
diff --git a/docs/Basic/Basic.vue b/docs/Basic/Basic.vue
deleted file mode 100644
index 0d7e2565..00000000
--- a/docs/Basic/Basic.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '@braks/vue-flow'
-import ResizableNode from './ResizableNode.vue'
-
-const elements = ref<Elements>([
-  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-  {
-    id: '2',
-    type: 'resize',
-    label: 'Node 2',
-    position: { x: 100, y: 100 },
-  },
-  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3' },
-])
-const { onPaneReady, onNodeDragStop, onConnect, instance, addEdges, store } = useVueFlow()
-onPaneReady(({ fitView }) => {
-  fitView({ padding: 0.1 })
-})
-onNodeDragStop((e) => console.log('drag stop', e))
-onConnect((params) => addEdges([params]))
-
-const updatePos = () =>
-  elements.value.forEach((el) => {
-    if (isNode(el)) {
-      el.position = {
-        x: Math.random() * 400,
-        y: Math.random() * 400,
-      }
-    }
-  })
-
-const logToObject = () => console.log(instance.value?.toObject())
-const resetTransform = () => instance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
-const toggleclass = () => elements.value.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
-</script>
-<template>
-  <VueFlow v-model="elements" class="vue-flow-basic-example" :default-zoom="1.5" :min-zoom="0.2" :max-zoom="4">
-    <template #node-resize="props">
-      <ResizableNode v-bind="props" />
-    </template>
-    <Background :height="33" bg-color="pink">
-      <text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
-    </Background>
-    <Background :height="33" bg-color="purple">
-      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 2 </text>
-    </Background>
-    <Background :height="33" bg-color="crimson">
-      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 3 </text>
-    </Background>
-    <MiniMap />
-    <Controls />
-    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
-      <button style="margin-right: 5px" @click="updatePos">change pos</button>
-      <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
-      <button @click="logToObject">toObject</button>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs/Basic/BasicOptionsAPI.vue b/docs/Basic/BasicOptionsAPI.vue
deleted file mode 100644
index 08c11db2..00000000
--- a/docs/Basic/BasicOptionsAPI.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<script lang="ts">
-import { VueFlow, Background, MiniMap, Controls, Elements, FlowEvents, FlowInstance, isNode, addEdge } from '@braks/vue-flow'
-
-export default defineComponent({
-  name: 'BasicOptionsAPI',
-  components: { VueFlow, Background, MiniMap, Controls },
-  data() {
-    return {
-      instance: null as FlowInstance | null,
-      elements: [
-        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
-        { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-        { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
-        { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
-        { id: 'e1-2', source: '1', target: '2', animated: true },
-        { id: 'e1-3', source: '1', target: '3' },
-      ] as Elements,
-    }
-  },
-  methods: {
-    logToObject() {
-      console.log(this.instance?.toObject())
-    },
-    resetTransform() {
-      //
-    },
-    toggleclass() {
-      this.elements.forEach((el) => (el.class = el.class === 'light' ? 'dark' : 'light'))
-    },
-    updatePos() {
-      this.elements.forEach((el) => {
-        if (isNode(el)) {
-          el.position = {
-            x: Math.random() * 400,
-            y: Math.random() * 400,
-          }
-        }
-      })
-    },
-    onNodeDragStop(e: FlowEvents['nodeDragStop']) {
-      console.log('drag stop', e)
-    },
-    onPaneReady({ fitView }: FlowEvents['paneReady']) {
-      fitView({ padding: 0.1 })
-    },
-    onConnect(params: FlowEvents['connect']) {
-      addEdge(params, this.elements)
-    },
-  },
-})
-</script>
-<template>
-  <VueFlow
-    v-model="elements"
-    class="vue-flow-basic-example"
-    :default-zoom="1.5"
-    :min-zoom="0.2"
-    :max-zoom="4"
-    :zoom-on-scroll="false"
-    @connect="onConnect"
-    @pane-ready="onPaneReady"
-    @node-drag-stop="onNodeDragStop"
-  >
-    <Background />
-    <MiniMap />
-    <Controls />
-    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
-      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
-      <button style="margin-right: 5px" @click="updatePos">change pos</button>
-      <button style="margin-right: 5px" @click="toggleclass">toggle class</button>
-      <button @click="logToObject">toObject</button>
-    </div>
-  </VueFlow>
-</template>
diff --git a/docs/Basic/ResizableNode.vue b/docs/Basic/ResizableNode.vue
deleted file mode 100644
index 6a5dddbc..00000000
--- a/docs/Basic/ResizableNode.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { Position, Handle, ValidConnectionFunc } from '@braks/vue-flow'
-
-interface Props {
-  id: string
-  selected?: boolean
-  connectable?: boolean
-  label?: string
-  isValidSourcePos?: ValidConnectionFunc
-  isValidTargetPos?: ValidConnectionFunc
-  parentNode?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  connectable: false,
-  sourcePosition: 'bottom' as Position,
-  targetPosition: 'top' as Position,
-})
-</script>
-<script lang="ts">
-export default {
-  name: 'ResizableNode',
-  inheritAttrs: false,
-}
-</script>
-<template>
-  <Handle
-    type="target"
-    :position="props.targetPosition"
-    :is-connectable="props.connectable"
-    :is-valid-connection="props.isValidTargetPos"
-  />
-  <div class="resize-node">
-    <div v-html="props.label"></div>
-    <div ref="el" class="resizer nodrag" />
-  </div>
-  <Handle
-    type="source"
-    :position="props.sourcePosition"
-    :is-connectable="props.connectable"
-    :is-valid-connection="props.isValidSourcePos"
-  />
-</template>
-<style>
-.resize-node {
-  padding: 1rem;
-  border: 1px solid gray;
-  border-radius: 4px;
-  background: white;
-}
-
-.resizer {
-  resize: both;
-  width: 200px;
-  height: 200px;
-  outline: none;
-  white-space: pre;
-  overflow-wrap: normal;
-  overflow: hidden;
-  background: aliceblue;
-  border: 1px solid gray;
-  border-radius: 4px;
-}
-</style>
diff --git a/docs/auto-imports.d.ts b/docs/auto-imports.d.ts
deleted file mode 100644
index d7d68940..00000000
--- a/docs/auto-imports.d.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-// Generated by 'unplugin-auto-import'
-// We suggest you to commit this file into source control
-declare global {
-  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
-  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
-  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
-  const computed: typeof import('vue')['computed']
-  const computedInject: typeof import('@vueuse/core')['computedInject']
-  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
-  const controlledRef: typeof import('@vueuse/core')['controlledRef']
-  const createApp: typeof import('vue')['createApp']
-  const createEventHook: typeof import('@vueuse/core')['createEventHook']
-  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
-  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
-  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
-  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
-  const customRef: typeof import('vue')['customRef']
-  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
-  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
-  const effectScope: typeof import('vue')['effectScope']
-  const EffectScope: typeof import('vue')['EffectScope']
-  const extendRef: typeof import('@vueuse/core')['extendRef']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const inject: typeof import('vue')['inject']
-  const isDefined: typeof import('@vueuse/core')['isDefined']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
-  const onLongPress: typeof import('@vueuse/core')['onLongPress']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const provide: typeof import('vue')['provide']
-  const reactify: typeof import('@vueuse/core')['reactify']
-  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
-  const reactive: typeof import('vue')['reactive']
-  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
-  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
-  const reactivePick: typeof import('@vueuse/core')['reactivePick']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const refDefault: typeof import('@vueuse/core')['refDefault']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const syncRef: typeof import('@vueuse/core')['syncRef']
-  const templateRef: typeof import('@vueuse/core')['templateRef']
-  const throttledRef: typeof import('@vueuse/core')['throttledRef']
-  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
-  const toRaw: typeof import('vue')['toRaw']
-  const toReactive: typeof import('@vueuse/core')['toReactive']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
-  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
-  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
-  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
-  const unref: typeof import('vue')['unref']
-  const unrefElement: typeof import('@vueuse/core')['unrefElement']
-  const until: typeof import('@vueuse/core')['until']
-  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
-  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
-  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useBase64: typeof import('@vueuse/core')['useBase64']
-  const useBattery: typeof import('@vueuse/core')['useBattery']
-  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
-  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
-  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
-  const useCached: typeof import('@vueuse/core')['useCached']
-  const useClamp: typeof import('@vueuse/core')['useClamp']
-  const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useColorMode: typeof import('@vueuse/core')['useColorMode']
-  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCounter: typeof import('@vueuse/core')['useCounter']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVar: typeof import('@vueuse/core')['useCssVar']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useCycleList: typeof import('@vueuse/core')['useCycleList']
-  const useDark: typeof import('@vueuse/core')['useDark']
-  const useDebounce: typeof import('@vueuse/core')['useDebounce']
-  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
-  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
-  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
-  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
-  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
-  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
-  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
-  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
-  const useDraggable: typeof import('@vueuse/core')['useDraggable']
-  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
-  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
-  const useElementHover: typeof import('@vueuse/core')['useElementHover']
-  const useElementSize: typeof import('@vueuse/core')['useElementSize']
-  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
-  const useEventBus: typeof import('@vueuse/core')['useEventBus']
-  const useEventListener: typeof import('@vueuse/core')['useEventListener']
-  const useEventSource: typeof import('@vueuse/core')['useEventSource']
-  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
-  const useFavicon: typeof import('@vueuse/core')['useFavicon']
-  const useFetch: typeof import('@vueuse/core')['useFetch']
-  const useFocus: typeof import('@vueuse/core')['useFocus']
-  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
-  const useFps: typeof import('@vueuse/core')['useFps']
-  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
-  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
-  const useIdle: typeof import('@vueuse/core')['useIdle']
-  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
-  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
-  const useInterval: typeof import('@vueuse/core')['useInterval']
-  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
-  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
-  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
-  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
-  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
-  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
-  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
-  const useMemoize: typeof import('@vueuse/core')['useMemoize']
-  const useMemory: typeof import('@vueuse/core')['useMemory']
-  const useMounted: typeof import('@vueuse/core')['useMounted']
-  const useMouse: typeof import('@vueuse/core')['useMouse']
-  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
-  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
-  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
-  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
-  const useNetwork: typeof import('@vueuse/core')['useNetwork']
-  const useNow: typeof import('@vueuse/core')['useNow']
-  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
-  const useOnline: typeof import('@vueuse/core')['useOnline']
-  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
-  const useParallax: typeof import('@vueuse/core')['useParallax']
-  const usePermission: typeof import('@vueuse/core')['usePermission']
-  const usePointer: typeof import('@vueuse/core')['usePointer']
-  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
-  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
-  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
-  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
-  const useRafFn: typeof import('@vueuse/core')['useRafFn']
-  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
-  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
-  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
-  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
-  const useScroll: typeof import('@vueuse/core')['useScroll']
-  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
-  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
-  const useShare: typeof import('@vueuse/core')['useShare']
-  const useSlots: typeof import('vue')['useSlots']
-  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
-  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
-  const useStorage: typeof import('@vueuse/core')['useStorage']
-  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
-  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
-  const useSwipe: typeof import('@vueuse/core')['useSwipe']
-  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
-  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
-  const useThrottle: typeof import('@vueuse/core')['useThrottle']
-  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
-  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
-  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
-  const useTimeout: typeof import('@vueuse/core')['useTimeout']
-  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
-  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
-  const useTitle: typeof import('@vueuse/core')['useTitle']
-  const useToggle: typeof import('@vueuse/core')['useToggle']
-  const useTransition: typeof import('@vueuse/core')['useTransition']
-  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
-  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useVibrate: typeof import('@vueuse/core')['useVibrate']
-  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
-  const useVModel: typeof import('@vueuse/core')['useVModel']
-  const useVModels: typeof import('@vueuse/core')['useVModels']
-  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
-  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
-  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
-  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
-  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
-  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
-  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
-  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
-  const watch: typeof import('vue')['watch']
-  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
-  const watchEffect: typeof import('vue')['watchEffect']
-  const watchOnce: typeof import('@vueuse/core')['watchOnce']
-  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
-  const whenever: typeof import('@vueuse/core')['whenever']
-}
-export {}
diff --git a/docs/package.json b/docs/package.json
index 790250a5..4aa29087 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,8 +18,10 @@
     "escape-html": "^1.0.3",
     "markdown-it": "^12.3.2",
     "prismjs": "^1.27.0",
-    "unplugin-auto-import": "^0.6.8",
-    "vite-plugin-vue-type-imports": "^0.1.3",
-    "vitepress": "^0.22.3"
+    "unplugin-vue-components": "^0.18.5",
+    "vite-plugin-windicss": "^1.8.3",
+    "vitepress": "^0.22.3",
+    "vue": "3.2.21",
+    "windicss": "^3.5.1"
   }
 }
diff --git a/docs/src/components/index.md b/docs/src/components/index.md
deleted file mode 100644
index aee9cdc3..00000000
--- a/docs/src/components/index.md
+++ /dev/null
@@ -1 +0,0 @@
-# Blabla
diff --git a/docs/src/index.md b/docs/src/index.md
index 2b1b235d..6297741c 100644
--- a/docs/src/index.md
+++ b/docs/src/index.md
@@ -1,3 +1,9 @@
+---
+home: true
+navbar: false
+footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
+---
+
 # Hello World
 
-<demo src="./Basic/Basic.vue" language="vue"></demo>
+<Home />
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index 2a2e6110..ec696c1a 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -23,7 +23,6 @@
       "@types/node"
     ],
   },
-  "include": ["./.vitepress", "."],
   "exclude": [
     "node_modules",
     "dist"
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
deleted file mode 100644
index 88997519..00000000
--- a/docs/vite.config.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { resolve } from 'path'
-import { defineConfig } from 'vite'
-import AutoImport from 'unplugin-auto-import/vite'
-
-export default defineConfig({
-  plugins: [
-    // https://github.com/antfu/unplugin-auto-import
-    AutoImport({
-      imports: ['vue', '@vueuse/core'],
-      dts: resolve('auto-imports.d.ts'),
-    }),
-  ],
-  optimizeDeps: {
-    include: ['@braks/vue-flow'],
-  },
-})
diff --git a/yarn.lock b/yarn.lock
index 71f28418..7665db66 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1388,6 +1388,28 @@
   dependencies:
     vue-demi "*"
 
+"@windicss/config@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@windicss/config/-/config-1.8.3.tgz#4f6eb0441be00ff7f284bb278a6d0c8f34f791ed"
+  integrity sha512-1fvfZhRD7WfV/Xh6uIAYKIdbQWrwEgSdkFlHiLPzMDS44KjwNZILDzLAz9Y2W5H2K4MLGgGMnzGS89ECyjc0Ww==
+  dependencies:
+    debug "^4.3.3"
+    jiti "^1.13.0"
+    windicss "^3.5.1"
+
+"@windicss/plugin-utils@1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@windicss/plugin-utils/-/plugin-utils-1.8.3.tgz#cec2bdc7703357de348e4512d61c7bd7802b049a"
+  integrity sha512-emlMeDt73uNV1ZofLTDogcxqL9aZ5uIRYkjeHlrWiaDozFbX6Jc+a6eRo9Ieaar3JUryl6AnecTPHAiFDl4IXg==
+  dependencies:
+    "@antfu/utils" "^0.5.0"
+    "@windicss/config" "1.8.3"
+    debug "^4.3.3"
+    fast-glob "^3.2.11"
+    magic-string "^0.25.7"
+    micromatch "^4.0.4"
+    windicss "^3.5.1"
+
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -2486,7 +2508,7 @@ debug@^3.1.0, debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2:
+debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3323,7 +3345,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^3.2.7, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
   integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -4233,6 +4255,11 @@ issue-regex@^3.1.0:
   resolved "https://registry.yarnpkg.com/issue-regex/-/issue-regex-3.1.0.tgz#0671f094d6449c5b712fac3c9562aecb727d709e"
   integrity sha512-0RHjbtw9QXeSYnIEY5Yrp2QZrdtz21xBDV9C/GIlY2POmgoS6a7qjkYS5siRKXScnuAj5/SPv1C3YForNCHTJA==
 
+jiti@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.13.0.tgz#3cdfc4e651ca0cca4c62ed5e47747b5841d41a8e"
+  integrity sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==
+
 js-stringify@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
@@ -4388,6 +4415,11 @@ kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kolorist@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/kolorist/-/kolorist-1.5.1.tgz#c3d66dc4fabde4f6b7faa6efda84c00491f9e52b"
+  integrity sha512-lxpCM3HTvquGxKGzHeknB/sUjuVoUElLlfYnXZT73K8geR9jQbroGlSCFBax9/0mpGoD3kzcMLnOlGQPJJNyqQ==
+
 latest-version@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
@@ -6499,6 +6531,22 @@ unplugin-auto-import@^0.6.8:
     resolve "^1.22.0"
     unplugin "^0.4.0"
 
+unplugin-vue-components@^0.18.5:
+  version "0.18.5"
+  resolved "https://registry.yarnpkg.com/unplugin-vue-components/-/unplugin-vue-components-0.18.5.tgz#96dfad540100ed8ae8895e65c32d9b37886dc5c5"
+  integrity sha512-VPA6z/4pcKRDYtWu1H+FIpV0MADlFKG3q7YMVFzNFC3EhMVZ4WuBJ76490oKyauguNw1T1obLCuxNU9JzJ0oAQ==
+  dependencies:
+    "@antfu/utils" "^0.5.0"
+    "@rollup/pluginutils" "^4.2.0"
+    chokidar "^3.5.3"
+    debug "^4.3.3"
+    fast-glob "^3.2.11"
+    local-pkg "^0.4.1"
+    magic-string "^0.26.1"
+    minimatch "^5.0.1"
+    resolve "^1.22.0"
+    unplugin "^0.4.0"
+
 unplugin@^0.3.0:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-0.3.3.tgz#e9b148f84cabef5e6529f232a10e674a7c020930"
@@ -6615,6 +6663,16 @@ vite-plugin-vue-type-imports@^0.1.3:
   resolved "https://registry.yarnpkg.com/vite-plugin-vue-type-imports/-/vite-plugin-vue-type-imports-0.1.3.tgz#06edf2da7abdd3367217842e69b6ed7f506a3919"
   integrity sha512-iF5NgeQc2MZ6wDUS1tnN7rglkWmm+WhK9rCQb3FudsrMTqLazbtN6shyrEcsGBdqYAqH9c5HhiwU3gOIrFcVHA==
 
+vite-plugin-windicss@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/vite-plugin-windicss/-/vite-plugin-windicss-1.8.3.tgz#d5fe923ad60f5d80f153a4fae5f837d56caa25cb"
+  integrity sha512-RIw2GD6H6cKNE8wZXVOBs4L1uTicVS0FaAkeqXvy1oyuXLC4SXmvnzEuoK0+qFuWJjW0ECNwE8eU+ZZhzNQKUg==
+  dependencies:
+    "@windicss/plugin-utils" "1.8.3"
+    debug "^4.3.3"
+    kolorist "^1.5.1"
+    windicss "^3.5.1"
+
 vite-svg-loader@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz#b5d6ca948b03e45320cb4f96c44bf88f5bef0a2c"
@@ -6903,6 +6961,11 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
+windicss@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/windicss/-/windicss-3.5.1.tgz#5e279c21179dbc122122d0b3a3a2651511249241"
+  integrity sha512-E1hYZATcZFci/XhGS0sJAMRxULjnK+glNukE78Ku7xeb3jxgMY55fFOdIrav+GjQCsgR+IZxPq9/DwmO6eyc4Q==
+
 with@^7.0.0:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/with/-/with-7.0.2.tgz#ccee3ad542d25538a7a7a80aad212b9828495bac"