Kbd

Used to display textual user input from keyboard.

Examples

Default

⌘ ⇧ ⌥ ⌃ 
<div class="flex items-center gap-1">
  <c-kbd>⌘</c-kbd>
  <c-kbd>⇧</c-kbd>
  <c-kbd>⌥</c-kbd>
  <c-kbd>⌃</c-kbd>
</div>

Group

Use the c-kbd-group component to wrap multiple c-kbd elements in a single styled container.

Use Ctrl + B Ctrl + K to open the command palette 

<p class="text-sm text-muted-foreground">
  Use <c-kbd-group><c-kbd>Ctrl</c-kbd> + <c-kbd>B</c-kbd></c-kbd-group>
  <c-kbd-group><c-kbd>Ctrl</c-kbd> + <c-kbd>K</c-kbd></c-kbd-group> to open the
  command palette
</p>

Button

Use the c-kbd-group component inside a c-button to display a keyboard shortcut inside a button.

Search ⌘K 
<c-button variant="outline">
  <span>Search</span>
  <c-kbd-group><c-kbd>⌘</c-kbd><c-kbd>K</c-kbd></c-kbd-group>
</c-button>

Single Key

B 
<c-kbd>B</c-kbd>

API Reference

Kbd

Displays a single keyboard key.

Prop Type Default Description
kbd-classes string '' Additional Tailwind CSS classes to customize the kbd element.

KbdGroup

Wraps multiple keys in a single styled container.

Prop Type Default Description
kbd-group-classes string '' Additional Tailwind CSS classes to customize the kbd group element.