Kbd

Features

• Semantic — Renders as a native kbd element
• Composable — Pair Kbd.Item with Kbd.Group for key combinations
• Context-aware — Adapts contrast when used inside tooltip content
• Customizable — Override styles with the class prop

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/kbd.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/kbd.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/kbd.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/kbd.json
    

Usage

      Copy
      <script setup lang="ts">
import { Kbd } from "@/components/ui/kbd";
</script>

<template>
  <Kbd.Item>Ctrl</Kbd.Item>
</template>
    

Composition

      Copy
      Kbd.Item
Kbd.Group
├── Kbd.Item
└── Kbd.Item
    

Examples

Group

Use Kbd.Group to group keyboard keys together.

Button

Use Kbd.Item inside a Button to show a keyboard shortcut.

Tooltip

Use Kbd.Item inside a Tooltip to show a keyboard shortcut on hover.

Input Group

Use Kbd.Item inside an InputGroup.Addon to hint at a keyboard shortcut.

API

Kbd.Item

Kbd.Group