Nuxt•4d ago

kbd multiple keys

Hey, does Ukbd in ui3 not support things like ctrl_k like defineShortcuts has?

2 Replies

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, UKbd in Nuxt UI does support special keys like "meta", which displays as ⌘ on macOS and ⊞ on other platforms. You can pass these special keys to the value prop, and they will be processed through the useKbd composable. For example, you can use:

<template>
  <UKbd value="meta" />
</template>

<template>
  <UKbd value="meta" />
</template>

However, UKbd is designed to display a single key at a time. If you want to display multiple keys as a keyboard shortcut (like the combination used in defineShortcuts), you would need to use multiple UKbd components together. For example, to display a Ctrl+K shortcut, you would do:

<template>
  <div class="flex items-center gap-0.5">
    <UKbd value="meta" />
    <UKbd value="K" />
  </div>
</template>

<template>
  <div class="flex items-center gap-0.5">
    <UKbd value="meta" />
    <UKbd value="K" />
  </div>
</template>

This approach is demonstrated in the documentation where keyboard shortcuts are displayed in components like the dashboard sidebar example:

<div class="flex items-center gap-0.5 ms-auto">
  <UKbd value="meta" variant="subtle" />
  <UKbd value="K" variant="subtle" />
</div>

<div class="flex items-center gap-0.5 ms-auto">
  <UKbd value="meta" variant="subtle" />
  <UKbd value="K" variant="subtle" />
</div>

Kbd Component provides more details on how to use the component and its available props. defineShortcuts uses a different format with underscores for defining keyboard combinations, but for displaying them visually, you'll need to use separate UKbd components. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

kbd multiple keys

Did you find this page helpful?