Displays keyboard input or shortcut keys with customizable styles and sizes.
<div class="flex items-center gap-4">
<span class="kt-kbd"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-up"
aria-hidden="true"
>
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path></svg></span
><span class="kt-kbd"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-down"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="m19 12-7 7-7-7"></path></svg></span
><span class="kt-kbd">space</span
><span class="kt-kbd"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-command"
aria-hidden="true"
>
<path
d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
></path>
</svg>
+K</span
>
</div>
<div class="flex items-center gap-4">
<span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-up"
aria-hidden="true"
>
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path></svg></span
><span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-down"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="m19 12-7 7-7-7"></path></svg></span
><span class="kt-kbd kt-kbd-outline">space</span
><span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-command"
aria-hidden="true"
>
<path
d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
></path>
</svg>
+K</span
>
</div>
<div class="space-y-4">
<div class="flex items-center gap-4">
<span class="kt-kbd kt-kbd-xs kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-up"
aria-hidden="true"
>
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path></svg></span
><span class="kt-kbd kt-kbd-xs kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-down"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="m19 12-7 7-7-7"></path></svg></span
><span class="kt-kbd kt-kbd-xs kt-kbd-outline">space</span
><span class="kt-kbd kt-kbd-xs kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-command"
aria-hidden="true"
>
<path
d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
></path>
</svg>
+K</span
>
</div>
<div class="flex items-center gap-4">
<span class="kt-kbd kt-kbd-sm kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-up"
aria-hidden="true"
>
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path></svg></span
><span class="kt-kbd kt-kbd-sm kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-down"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="m19 12-7 7-7-7"></path></svg></span
><span class="kt-kbd kt-kbd-sm kt-kbd-outline">space</span
><span class="kt-kbd kt-kbd-sm kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-command"
aria-hidden="true"
>
<path
d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
></path>
</svg>
+K</span
>
</div>
<div class="flex items-center gap-4">
<span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-up"
aria-hidden="true"
>
<path d="m5 12 7-7 7 7"></path>
<path d="M12 19V5"></path></svg></span
><span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-arrow-down"
aria-hidden="true"
>
<path d="M12 5v14"></path>
<path d="m19 12-7 7-7-7"></path></svg></span
><span class="kt-kbd kt-kbd-outline">space</span
><span class="kt-kbd kt-kbd-outline"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-command"
aria-hidden="true"
>
<path
d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
></path>
</svg>
+K</span
>
</div>
</div>
On This Page