diff --git a/docs/components/content/BadgeShortcut.vue b/docs/components/content/BadgeShortcut.vue
new file mode 100644
index 00000000..a5a590e1
--- /dev/null
+++ b/docs/components/content/BadgeShortcut.vue
@@ -0,0 +1,18 @@
+
+
+ {{ shortcut }}
+
+
+
+
diff --git a/docs/content/1.getting-started/1.index.md b/docs/content/1.getting-started/1.index.md
index 98aeaffc..c120b33d 100644
--- a/docs/content/1.getting-started/1.index.md
+++ b/docs/content/1.getting-started/1.index.md
@@ -5,15 +5,13 @@ description: 'Components library as a Nuxt module using TailwindCSS and Headless
This module has been developed by the [NuxtLabs](https://nuxtlabs.com/) team for [Volta](https://volta.net) and [Nuxt Studio](https://nuxt.studio/), its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts.
-Components are built on top of [TailwindCSS](https://tailwindcss.com/) and [HeadlessUI](https://headlessui.com/) to provide a set of fully customizable components with dark mode support.
-
::alert{icon="i-heroicons-light-bulb"}
[Volta](https://volta.net/) entire UI is built with this module alongside the 50+ keyboard shortcuts defined.
::
## Features
-- Fully customizable components
+- Fully styled and customizable components
- HMR support through Nuxt App Config
- Dark mode support
- Keyboard shortcuts
@@ -29,7 +27,6 @@ Components are built on top of [TailwindCSS](https://tailwindcss.com/) and [Head
- [tailwindlabs/headlessui](https://github.com/tailwindlabs/headlessui)
- [vueuse/vueuse](https://github.com/vueuse/vueuse)
- [egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons)
-- [krisk/fuse](https://github.com/krisk/Fuse)
::alert{icon="i-heroicons-exclamation-triangle"}
This documentation is still a work in progress and will be updated regularly.
diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index 702a755e..e946a5bb 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -77,7 +77,7 @@ export default defineAppConfig({
You can use any icon (100,000+) from [Iconify](https://iconify.design/).
-Most of the components have an `icon` prop that allows you to add an icon to the component.
+Some components have an `icon` prop that allows you to add an icon to the component.
```vue
diff --git a/docs/content/1.getting-started/4.shortcuts.md b/docs/content/1.getting-started/4.shortcuts.md
index b325b420..45fc8688 100644
--- a/docs/content/1.getting-started/4.shortcuts.md
+++ b/docs/content/1.getting-started/4.shortcuts.md
@@ -25,9 +25,7 @@ Shortcuts are displayed and styled through the [Kbd](/elements/kbd) component.
You will have a preview of how shortcuts are rendered in each component page.
::
-## Composables
-
-### `defineShortcuts`
+## `defineShortcuts`
This module provides a `defineShortcuts` composable that allows you to define keyboard shortcuts in your app really easily.
@@ -50,7 +48,7 @@ defineShortcuts({
```
-### `useShortcuts`
+## `useShortcuts`
To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
diff --git a/docs/content/6.layout/3.skeleton.md b/docs/content/6.layout/3.skeleton.md
index 094a5190..01ab6f50 100644
--- a/docs/content/6.layout/3.skeleton.md
+++ b/docs/content/6.layout/3.skeleton.md
@@ -13,9 +13,9 @@ Use to show a placeholder while content is loading.
#code
```vue
-