Components
The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
The most commonly used kbd styles.
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<kbd class="inline-flex items-center font-mono text-sm text-gray-400 dark:text-gray-600">
ctrl
</kbd>
<kbd class="inline-flex items-center font-mono text-sm text-gray-800 dark:text-gray-200">
ctrl
</kbd>
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
ctrl
</kbd>
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200">
ctrl
</kbd>
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md shadow-[0px_2px_0px_0px_rgba(0,0,0,0.08)] dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200 dark:shadow-[0px_2px_0px_0px_rgba(255,255,255,0.1)]">
ctrl
</kbd>
</span>
<!-- End KBD -->
Examples with icons to create different types of keyboard input elements.
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<kbd class="min-h-[30px] min-w-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-3 h-3" 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"><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"/></svg>
</kbd>
<kbd class="min-h-[30px] min-w-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-3 h-3" 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"><path d="M3 3h6l6 18h6"/><path d="M14 3h7"/></svg>
</kbd>
<kbd class="min-h-[30px] min-w-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="M9 18v-6H5l7-7 7 7h-4v6H9z"/></svg>
</kbd>
<kbd class="min-h-[30px] min-w-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-white border border-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-slate-900 dark:border-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-4 h-4" 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"><path d="m18 15-6-6-6 6"/></svg>
</kbd>
</span>
<!-- End KBD -->
Examples with modifiers to create different types of keyboard input elements.
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
shift
</kbd>
and
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
b
</kbd>
</span>
<!-- End KBD -->
KBD stacked small to large sizes.
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<kbd class="min-h-[18px] inline-flex justify-center items-center px-1 bg-gray-200 border border-transparent font-mono text-xs text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
ctrl
</kbd>
<kbd class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
ctrl
</kbd>
<kbd class="min-h-[42px] inline-flex justify-center items-center py-1.5 px-2 bg-gray-200 border border-transparent font-mono text-lg text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
ctrl
</kbd>
</span>
<!-- End KBD -->
Here's an input example with KBD.
<div class="relative max-w-xs">
<div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5">
<svg class="flex-shrink-0 w-4 h-4 text-gray-400 dark:text-white/60" 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"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
</div>
<input type="text" class="py-2 px-3 ps-10 pe-14 block w-full border-gray-200 rounded-lg text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-gray-700 dark:text-gray-300 dark:placeholder:text-white/60 dark:focus:ring-gray-600" placeholder="Search or type a command" data-hs-overlay="#hs-pro-dnsm">
<div class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3">
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-400 dark:text-gray-600">
<kbd class="min-h-[30px] inline-flex justify-center items-center font-mono text-xs text-gray-400 rounded-md dark:text-gray-600">
<svg class="flex-shrink-0 w-3 h-3" 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"><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"/></svg>
</kbd>
+
<kbd class="min-h-[30px] inline-flex justify-center items-center font-mono text-xs text-gray-400 rounded-md dark:text-gray-600">
/
</kbd>
</span>
<!-- End KBD -->
</div>
</div>
List group example.
<!-- List Group -->
<ul>
<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-gray-200 first:border-t-0 dark:border-gray-700">
<span class="font-bold text-gray-800 dark:text-white">
Bold
</span>
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Ctrl
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
b
</span>
</span>
<!-- End KBD -->
</li>
<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-gray-200 first:border-t-0 dark:border-gray-700">
<span class="italic text-gray-800 dark:text-white">
Italic
</span>
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Ctrl
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
i
</span>
</span>
<!-- End KBD -->
</li>
<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-gray-200 first:border-t-0 dark:border-gray-700">
<span class="underline underline-offset-4 text-gray-800 dark:text-white">
Underline
</span>
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Ctrl
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
u
</span>
</span>
<!-- End KBD -->
</li>
<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-gray-200 first:border-t-0 dark:border-gray-700">
<span class="line-through text-gray-800 dark:text-white">
Strikethrough
</span>
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Ctrl
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Alt
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
u
</span>
</span>
<!-- End KBD -->
</li>
<li class="flex justify-between items-center gap-x-2 py-2.5 border-t border-gray-200 first:border-t-0 dark:border-gray-700">
<span class="text-sm text-gray-800 dark:text-white">
Small text
</span>
<!-- KBD -->
<span class="flex flex-wrap items-center gap-x-1 text-sm text-gray-600 dark:text-gray-400">
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
Ctrl
</span>
+
<span class="min-h-[30px] inline-flex justify-center items-center py-1 px-1.5 bg-gray-200 border border-transparent font-mono text-sm text-gray-800 rounded-md dark:bg-gray-700 dark:text-gray-200">
s
</span>
</span>
<!-- End KBD -->
</li>
</ul>
<!-- End List Group -->