From 612a9e930df33eedde8a5ec52f88078593fcfb85 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 10 Jul 2024 18:44:08 +0200
Subject: [PATCH] docs(kbd): update

---
 docs/content/3.components/kbd.md | 89 ++++++++++++++++++++++++++++++++
 docs/nuxt.config.ts              |  3 +-
 2 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/kbd.md b/docs/content/3.components/kbd.md
index b55fb041..6307ecf7 100644
--- a/docs/content/3.components/kbd.md
+++ b/docs/content/3.components/kbd.md
@@ -11,8 +11,97 @@ navigation:
 
 ## Usage
 
+Use the default slot to set the value of the Kbd.
+
+::component-code
+---
+slots:
+  default: K
+---
+::
+
+You can achieve the same result by using the `value` prop.
+
+::component-code
+---
+props:
+  value: K
+---
+::
+
+You can pass special keys to the `value` prop that goes through the [`useKbd`](https://github.com/benjamincanac/ui3/blob/dev/src/runtime/composables/useKbd.ts) composable. For example, the `meta` key will display as `⌘` on macOS and `Ctrl` on other platforms.
+
+::component-code
+---
+props:
+  value: meta
+items:
+  value:
+    - meta
+    - command
+    - shift
+    - ctrl
+    - option
+    - alt
+    - enter
+    - delete
+    - backspace
+    - escape
+    - tab
+    - capslock
+    - arrowup
+    - arrowright
+    - arrowdown
+    - arrowleft
+    - pageup
+    - pagedown
+    - home
+    - end
+---
+::
+
+### Style
+
+Use the `variant` prop to change the style of the Kbd.
+
+::component-code
+---
+props:
+  variant: solid
+slots:
+  default: K
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Kbd.
+
+::component-code
+---
+props:
+  size: md
+slots:
+  default: K
+---
+::
+
 ## Examples
 
+### `class` prop
+
+Use the `class` prop to override the base styles of the Badge.
+
+::component-code
+---
+props:
+  class: 'font-bold rounded-full'
+  variant: subtle
+slots:
+  default: K
+---
+::
+
 ## API
 
 ### Props
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 734f065a..168b3e3b 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -119,7 +119,8 @@ export default defineNuxtConfig({
     'components:extend': (components) => {
       const globals = components.filter(c => [
         'UBadge',
-        'UButton'
+        'UButton',
+        'UKbd'
       ].includes(c.pascalName))
 
       globals.forEach(c => c.global = 'sync')