Components
pinion-ui

Theme

Tune

Lang

Kbd

Inline keyboard shortcut chip wrapping HTML5 <kbd> with daisyUI 5 kbd class. Two props: size and appearance. Embed in prose or chain with + to show combos.

Standalone

K
<x-kbd>K</x-kbd>

<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">K</kbd>

size — xs / sm / md (default) / lg / xl

K K K K K Enter Enter Enter Enter Enter
<x-kbd size="xs">K</x-kbd>
<x-kbd size="sm">K</x-kbd>
<x-kbd size="md">K</x-kbd>
<x-kbd size="lg">K</x-kbd>
<x-kbd size="xl">K</x-kbd>
<x-kbd size="xs">Enter</x-kbd>
<x-kbd size="sm">Enter</x-kbd>
<x-kbd size="md">Enter</x-kbd>
<x-kbd size="lg">Enter</x-kbd>
<x-kbd size="xl">Enter</x-kbd>

<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-4 min-w-4 text-[0.625rem] bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-7 min-w-7 text-base bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-8 min-w-8 text-lg bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-4 min-w-4 text-[0.625rem] bg-base-200 border border-base-content/20 border-b-2">Enter</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">Enter</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Enter</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-7 min-w-7 text-base bg-base-200 border border-base-content/20 border-b-2">Enter</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-8 min-w-8 text-lg bg-base-200 border border-base-content/20 border-b-2">Enter</kbd>

appearance — default / soft / outline

K Ctrl K Ctrl K Ctrl
<x-kbd>K</x-kbd>
<x-kbd>Ctrl</x-kbd>
<x-kbd appearance="soft">K</x-kbd>
<x-kbd appearance="soft">Ctrl</x-kbd>
<x-kbd appearance="outline">K</x-kbd>
<x-kbd appearance="outline">Ctrl</x-kbd>

<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Ctrl</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 text-base-content border-0">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 text-base-content border-0">Ctrl</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm border border-base-content/30 bg-transparent">K</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm border border-base-content/30 bg-transparent">Ctrl</kbd>

combo (join with + / adjacent)

Open the command palette Ctrl + K
Save (macOS) ⌘ S
Show help Shift + ?
Three-key combo Ctrl + Shift + P
Larger size Ctrl + K 
<div class="flex flex-col gap-4 text-sm">
    <div class="flex items-center gap-3">
        <span class="text-base-content/70 w-48">Open the command palette</span>
        <span><x-kbd>Ctrl</x-kbd> + <x-kbd>K</x-kbd></span>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-base-content/70 w-48">Save (macOS)</span>
        <span><x-kbd>⌘</x-kbd><x-kbd>S</x-kbd></span>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-base-content/70 w-48">Show help</span>
        <span><x-kbd>Shift</x-kbd> + <x-kbd>?</x-kbd></span>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-base-content/70 w-48">Three-key combo</span>
        <span><x-kbd>Ctrl</x-kbd> + <x-kbd>Shift</x-kbd> + <x-kbd>P</x-kbd></span>
    </div>
    <div class="flex items-center gap-3">
        <span class="text-base-content/70 w-48">Larger size</span>
        <span><x-kbd size="lg">Ctrl</x-kbd> + <x-kbd size="lg">K</x-kbd></span>
    </div>
</div>

<div class="flex flex-col gap-4 text-sm">
<div class="flex items-center gap-3">
<span class="text-base-content/70 w-48">Open the command palette</span>
<span><kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Ctrl</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">K</kbd></span>
</div>
<div class="flex items-center gap-3">
<span class="text-base-content/70 w-48">Save (macOS)</span>
<span><kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">⌘</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">S</kbd></span>
</div>
<div class="flex items-center gap-3">
<span class="text-base-content/70 w-48">Show help</span>
<span><kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Shift</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">?</kbd></span>
</div>
<div class="flex items-center gap-3">
<span class="text-base-content/70 w-48">Three-key combo</span>
<span><kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Ctrl</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">Shift</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-6 min-w-6 text-sm bg-base-200 border border-base-content/20 border-b-2">P</kbd></span>
</div>
<div class="flex items-center gap-3">
<span class="text-base-content/70 w-48">Larger size</span>
<span><kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-7 min-w-7 text-base bg-base-200 border border-base-content/20 border-b-2">Ctrl</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-7 min-w-7 text-base bg-base-200 border border-base-content/20 border-b-2">K</kbd></span>
</div>
</div>

Embedded in text

Press / to focus search, and Esc to close it.

Save with ⌘ S , or save as with ⌘ + Shift + S .

The soft appearance sits more quietly in body copy: ⌘ K .

<div class="max-w-none text-sm leading-relaxed">
    <p>Press <x-kbd size="sm">/</x-kbd> to focus search, and <x-kbd size="sm">Esc</x-kbd> to close it.</p>
    <p class="mt-3">Save with <x-kbd size="sm">⌘</x-kbd><x-kbd size="sm">S</x-kbd>, or save as with <x-kbd size="sm">⌘</x-kbd> + <x-kbd size="sm">Shift</x-kbd> + <x-kbd size="sm">S</x-kbd>.</p>
    <p class="mt-3">The soft appearance sits more quietly in body copy: <x-kbd size="sm" appearance="soft">⌘</x-kbd><x-kbd size="sm" appearance="soft">K</x-kbd>.</p>
</div>

<div class="max-w-none text-sm leading-relaxed">
<p>
        Press <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">/</kbd> to focus search, and <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">Esc</kbd> to close it.
    </p>
<p class="mt-3">
        Save with <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">⌘</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">S</kbd> , or save as with <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">⌘</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">Shift</kbd> + <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 border border-base-content/20 border-b-2">S</kbd> .
    </p>
<p class="mt-3">
        The soft appearance sits more quietly in body copy: <kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 text-base-content border-0">⌘</kbd>
<kbd class="inline-flex items-center justify-center align-middle rounded-[var(--radius-field)] px-[.5em] h-5 min-w-5 text-xs bg-base-200 text-base-content border-0">K</kbd> .
    </p>
</div>