feat(components): shortcut

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/Shortcut.vue

@@ -0,0 +1,19 @@
+<template>
+  <Kbd :size>
+    {{ computedValue }}
+  </Kbd>
+</template>
+
+<script setup lang="ts">
+const { value, size = 'sm' } = defineProps<{
+  value: string;
+  size?: 'xs' | 'sm' | 'md';
+}>();
+
+const metaSymbol = ref('Ctrl');
+onMounted(() => {
+  metaSymbol.value = navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/) ? '⌘' : 'Ctrl';
+});
+
+const computedValue = computed(() => value === 'meta' ? metaSymbol : value);
+</script>

content/1.getting-started/3.writing/2.components.md

@@ -871,6 +871,23 @@ Stackable components:
 - `card`
 - `tabs`
 
+### Shortcut
+:badge[0.6.3]{variant="outline"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/shortcut" target="_blank"}
+
+::code-group
+  ::div{label="Preview" class="md:p-4"}
+    :shortcut{value="meta"} :shortcut{value="K"} :br
+    :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
+  ::
+  ```mdc [Code]
+  :shortcut{value="meta"} :shortcut{value="K"} :br
+  :shortcut{value="xs" size="xs"} :shortcut{value="sm"} :shortcut{value="md" size="md"}
+  ```
+::
+
+You can put `meta` in the `value` field to automatically display either :shortcut{value="⌘"} or :shortcut{value="Ctrl"} based on the platform.
+
 ## Page Components
 
 ### Hero