docs: minor improvements

docs/components/content/BadgeShortcut.vue

@@ -0,0 +1,18 @@
+<template>
+  <UKbd class="!my-0 align-text-top">
+    {{ shortcut }}
+  </UKbd>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const { metaSymbol } = useShortcuts()
+
+const shortcut = computed(() => props.value === 'meta' ? metaSymbol.value : props.value)
+</script>

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.

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
 <template>

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({
 </script>
 ```
 
-### `useShortcuts`
+## `useShortcuts`
 
 To display shortcuts in your app according to the user's OS, you can use the `useShortcuts` composable.
 

docs/content/6.layout/3.skeleton.md

@@ -13,9 +13,9 @@ Use to show a placeholder while content is loading.
 #code
 ```vue
 <template>
-  <div className="flex items-center space-x-4">
+  <div class="flex items-center space-x-4">
     <USkeleton class="h-12 w-12 rounded-full" />
-    <div className="space-y-2">
+    <div class="space-y-2">
       <USkeleton class="h-4 w-[250px]" />
       <USkeleton class="h-4 w-[200px]" />
     </div>

docs/pages/index.vue

@@ -3,5 +3,5 @@
 </template>
 
 <script setup lang="ts">
-await navigateTo('/getting-started/installation')
+await navigateTo('/getting-started')
 </script>