Kbd

kbdui

Boilerplate repo

Inline keyboard-key indicator — renders a single key or shortcut in monospace with a subtle bordered chip.

Also available for React ->

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/kbd.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/kbd.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/kbd.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/kbd.json

Named registry:npx shadcn-vue@latest add @uipkge/kbdInstalls to:app/components/ui/kbd/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`class`	`HTMLAttributes['class']`	—	optional

Used by

data-explorer header header-search-command questionnaire shortcuts-dialog

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

app/components/ui/kbd/Kbd.vue0.5 kB

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <kbd
    data-uipkge
    data-slot="kbd"
    :class="
      cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded border px-1.5 font-mono text-xs font-medium select-none',
        props.class,
      )
    "
  >
    <slot />
  </kbd>
</template>