django/shadcn-ui

Kbd

Displays a keyboard key or a combination of keys.

Ctrl K

Installation

uvx django_shadcn@latest add kbd

Usage

K 
<c-kbd>K</c-kbd>

Examples

Group

Ctrl K ⌘ ⇧ P 
<c-kbd.group>
  <c-kbd>Ctrl</c-kbd>
  <c-kbd>K</c-kbd>
</c-kbd.group>

Inside a button

<c-button variant="outline" size="sm">
  Search
  <c-kbd.group>
    <c-kbd>⌘</c-kbd>
    <c-kbd>K</c-kbd>
  </c-kbd.group>
</c-button>

In a sentence

Press Esc to close this dialog. 

Press <c-kbd>Esc</c-kbd> to close this dialog.