Xing Kbd

The keyboard shortcut key to display on your app.

Source on GitHub
⌘K
CtrlK
CtrlK
CtrlK
CtrlK
npm
pnpm
bun
npx nidexingg-ui add kbd
XingKbd.vue
<XingKbd />
<div class="flex items-center space-x-1">
  <XingKbd shortcut="Ctrl"  size="sm"/>
  <XingKbd shortcut="K"  size="sm" />
</div>
<div class="flex items-center space-x-1">
  <XingKbd shortcut="Ctrl" size="md" />
  <XingKbd shortcut="K" size="md" />
</div>
<div class="flex items-center space-x-1">
  <XingKbd shortcut="Ctrl" color="lime" size="md" />
  <XingKbd shortcut="K" color="lime" size="md" />
</div>
<div class="flex items-center space-x-1">
  <XingKbd shortcut="Ctrl" color="pink" size="xs" />
  <XingKbd shortcut="K" color="violet" size="xs" />
</div>

🦄 Features

  • Dynamic Size and Color Customizability: Tailor the badge to fit your design needs with flexible size options and a vibrant palette of colors, allowing for seamless integration into any user interface.

🧑‍🏫 Usage Guide

Props

shortcutstring
⌘K
Value of the keyboard shortcut.
sizestring
xs
Badge size options: xs, sm, md.
colorstring
zinc
Badge color options. Currently, it supports only standard TailwindCSS colors, including: slate, gray, zinc, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky blue, indigo, violet, purple, fuchsia, pink, and rose.

🧑‍💻 Maintainers and Credits

Xing Input
Simple input with customizations
Xing Tab
Tab component