{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Keyboard key and shortcut display built on the semantic <kbd> element, in three sizes, with KbdGroup for combinations like ⌘ ⇧ K. Adapts inside tooltips.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/kbd.tsx",
      "content": "// Ballmac UI: Kbd. https://ui.ballmac.com/components/kbd\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst kbdVariants = cva(\n  \"pointer-events-none inline-flex w-fit shrink-0 select-none items-center justify-center gap-1 rounded-[5px] border border-border bg-muted font-sans font-medium text-muted-foreground shadow-[inset_0_-1px_0_0_var(--color-border)] [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:border-background/20 [[data-slot=tooltip-content]_&]:bg-background/15 [[data-slot=tooltip-content]_&]:text-background [[data-slot=tooltip-content]_&]:shadow-none\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 min-w-4 px-1 text-[10px]\",\n        default: \"h-5 min-w-5 px-1 text-[11px]\",\n        lg: \"h-6 min-w-6 px-1.5 text-xs\",\n      },\n    },\n    defaultVariants: { size: \"default\" },\n  }\n)\n\ntype KbdProps = React.ComponentProps<\"kbd\"> & VariantProps<typeof kbdVariants>\n\nfunction Kbd({ className, size = \"default\", ...props }: KbdProps) {\n  return <kbd data-slot=\"kbd\" dir=\"ltr\" className={cn(kbdVariants({ size }), className)} {...props} />\n}\n\ntype KbdGroupProps = React.ComponentProps<\"kbd\">\n\n/**\n * Groups keys that are pressed together. Renders a nested <kbd>, the HTML pattern for a key combination.\n */\nfunction KbdGroup({ className, ...props }: KbdGroupProps) {\n  return <kbd data-slot=\"kbd-group\" dir=\"ltr\" className={cn(\"inline-flex items-center gap-1 font-sans\", className)} {...props} />\n}\n\nexport { Kbd, KbdGroup, kbdVariants, type KbdGroupProps, type KbdProps }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/kbd.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "kbd",
      "keyboard",
      "shortcut",
      "hotkey"
    ],
    "version": "1.0.0",
    "updated": "2026-09-28",
    "ai": {
      "summary": "Displays a key or shortcut. Use Kbd for each key and KbdGroup for keys pressed together; it restyles itself for the dark tooltip surface automatically.",
      "whenToUse": [
        "Shortcut hints in menus, tooltips and command palettes",
        "Documentation of keyboard controls",
        "Search inputs that show a ⌘ K hint"
      ],
      "whenNotToUse": [
        "Inline code or commands (use code)",
        "Buttons that trigger the shortcut (use button)"
      ],
      "composesWith": [
        "tooltip",
        "button",
        "input"
      ],
      "a11y": [],
      "customization": [
        "size: sm | default | lg",
        "Use symbols (⌘ ⇧ ⌥ ⌃ ↵) or words (Ctrl, Enter); add aria-label on KbdGroup if symbols need spelling out"
      ]
    },
    "examples": [
      "kbd-demo"
    ],
    "url": "https://ui.ballmac.com/components/kbd"
  },
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}