diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index f938711..3e582d1 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -12,51 +12,67 @@ export default defineConfig({
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
-      { text: 'Demo', link: '/demo/collapse' },
+      { text: 'Demo', link: '/demo/' },
     ],
     search: {
       provider: 'local',
     },
-    sidebar: [
-      {
-        text: 'Guide',
-        items: [
-          { text: 'Get started', link: '/guide/' },
-          {
-            text: 'Collapse / Accordion',
-            link: '/guide/collapse',
-          },
-          {
-            text: 'Drag',
-            link: '/guide/drag',
-          },
-          {
-            text: 'Drilldown',
-            link: '/guide/drilldown',
-          },
-          {
-            text: 'Dropdown',
-            link: '/guide/dropdown',
-          },
-          {
-            text: 'Marquee',
-            link: '/guide/marquee',
-          },
-        ],
-      },
-      {
-        text: 'Demo',
-        collapsed: true,
-        items: [
-          { text: 'Collapse/Accordion', link: '/demo/collapse' },
-          { text: 'Drag', link: '/demo/drag' },
-          { text: 'Drilldown', link: '/demo/drilldown' },
-          { text: 'Dropdown', link: '/demo/dropdown' },
-          { text: 'Marquee', link: '/demo/marquee' },
-        ],
-      },
-    ],
-
+    sidebar: {
+      '/guide/': [
+        {
+          text: 'Guide',
+          items: [
+            { text: 'Get started', link: '/guide/' },
+            {
+              text: 'Collapse / Accordion',
+              link: '/guide/collapse',
+            },
+            {
+              text: 'Drag',
+              link: '/guide/drag',
+            },
+            {
+              text: 'Drilldown',
+              link: '/guide/drilldown',
+            },
+            {
+              text: 'Dropdown',
+              link: '/guide/dropdown',
+            },
+            {
+              text: 'Marquee',
+              link: '/guide/marquee',
+            },
+          ],
+        },
+        {
+          text: 'Vue',
+          items: [
+            {
+              text: 'Get started',
+              link: '/guide/vue/',
+            },
+            {
+              text: 'Composables',
+              link: '/guide/vue/composables',
+            },
+          ],
+        },
+      ],
+      '/demo/': [
+        {
+          text: 'Demo',
+          link: '/demo/',
+          items: [
+            { text: 'Collapse/Accordion', link: '/demo/collapse' },
+            { text: 'Drag', link: '/demo/drag' },
+            { text: 'Drilldown', link: '/demo/drilldown' },
+            { text: 'Dropdown', link: '/demo/dropdown' },
+            { text: 'Marquee', link: '/demo/marquee' },
+          ],
+        },
+      ],
+    },
     socialLinks: [
       { icon: 'github', link: 'https://github.com/Applelo/compotes' },
     ],
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 6b27723..61e2296 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -15,6 +15,7 @@
   --vp-c-brand-dark: #535bf2;
   --vp-c-brand-darker: #454ce1;
   --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+  --vp-c-brand-1: var(--vp-c-brand);
 }
 
 /**
diff --git a/docs/demo/index.md b/docs/demo/index.md
new file mode 100644
index 0000000..6c428f7
--- /dev/null
+++ b/docs/demo/index.md
@@ -0,0 +1,7 @@
+# Demo
+
+Compotes provides minimum styles, so some CSS is added to make it work with the CSS provided by the documentation (VitePress).
+
+Demo are made with the Vanilla JS version of the library and encapsulated with VueJS.
+
+You can check directly [the source code of the documentation](https://github.com/Applelo/compotes/tree/main/docs/demo) for more details.
diff --git a/docs/guide/index.md b/docs/guide/index.md
index 486878e..515dda5 100644
--- a/docs/guide/index.md
+++ b/docs/guide/index.md
@@ -12,6 +12,9 @@
 # pnpm
 pnpm add -D compotes
 
+# bun
+bun add -D compotes
+
 #npm
 npm i -D compotes
 
diff --git a/docs/guide/vue/composables.md b/docs/guide/vue/composables.md
new file mode 100644
index 0000000..42a7c44
--- /dev/null
+++ b/docs/guide/vue/composables.md
@@ -0,0 +1 @@
+# Vue Composables
diff --git a/docs/guide/vue/index.md b/docs/guide/vue/index.md
new file mode 100644
index 0000000..f876cea
--- /dev/null
+++ b/docs/guide/vue/index.md
@@ -0,0 +1,27 @@
+# Vue
+
+`@compotes/vue` provides [composables](/guide/vue/composables) and soon components wrappers for the `compotes` library.
+
+## Installation
+
+Install the Vue version of the library with your favorite package manager.
+
+::: info
+No needs to install the `compotes` package since it is a dependencies of `@compotes/vue`.
+:::
+
+```shell
+# pnpm
+pnpm add -D @compotes/vue
+
+# bun
+bun add -D @compotes/vue
+
+#npm
+npm i -D @compotes/vue
+
+# yarn
+yarn add -D @compotes/vue
+```
+
+For usage, check the [composables](/guide/vue/composables) page.