Kbd · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JKbd } from '@juxtui/ui'

Usage #

<JKbd keys="mod+k" />
<JKbd>Esc</JKbd>

keys takes hotkey syntax, e.g. mod+k or shift+enter. mod renders as ⌘ on Apple platforms and Ctrl elsewhere — the same resolution useHotkey uses for binding. For a literal key or icon, use the default slot instead.

Platform glyphs are only known once mounted, so the server and first client render use plain labels (Ctrl, single letters uppercased) and settle into the platform-specific glyph a moment later — this avoids a hydration mismatch.

Variants & examples #

Sizes#

CtrlKCtrlK

<template>
  <div class="flex items-center gap-4">
    <JKbd keys="mod+k" size="sm" />
    <JKbd keys="mod+k" />
  </div>
</template>

Inline in text#

Drop a JKbd into a sentence to reference a shortcut.

Press CtrlshiftP to open the command palette, or Esc to dismiss it.

<template>
  <p class="max-w-sm text-sm text-fg">
    Press <JKbd keys="mod+shift+p" /> to open the command palette, or <JKbd>Esc</JKbd> to dismiss it.
  </p>
</template>

API #

Props

Prop	Type	Default	Description
keys	`string`	—	A shortcut in hotkey syntax, e.g. `mod+k` or `shift+enter`. Renders one `<kbd>` per part.
size	`'sm' \| 'md'`	`'md'`	Key height and type size.

Slots

Slot	Props	Description
default	—	Literal key content, used instead of `keys` (e.g. an arrow glyph or a single letter).

Accessibility #

Renders a native <kbd> element, which screen readers announce as keyboard input.
Purely presentational — pair it with visible text describing what the shortcut does, don’t rely on it alone.