Kbd

Displays a keyboard key or shortcut.

⌘K

Press Ctrl + B to toggle the sidebar.

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/kbd.json

Usage

Use Kbd to represent individual keyboard keys in shortcuts, tooltips, or command menus, and KbdGroup to combine several keys into a single shortcut sequence.

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

<template>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</template>

Kbd automatically adapts its colors when nested inside a TooltipContent.