{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "kbd",
  "title": "Kbd",
  "description": "Keycaps and key combinations.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/kbd.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/** A keycap. Uses the theme's `cue-kbd` utility, so it matches the hints inside buttons, menus and tooltips. */\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return <kbd data-slot=\"kbd\" className={cn(\"cue-kbd\", className)} {...props} />;\n}\n\n/** A key combination, e.g. `<KbdGroup keys={[\"⌘\", \"Shift\", \"P\"]} />`; rendered as nested `<kbd>` per the HTML spec. */\nfunction KbdGroup({ className, keys, separator, ...props }: React.ComponentProps<\"kbd\"> & { keys: string[]; separator?: React.ReactNode }) {\n  return (\n    <kbd data-slot=\"kbd-group\" className={cn(\"inline-flex items-center gap-1 font-sans\", className)} {...props}>\n      {keys.map((key, i) => (\n        <React.Fragment key={`${key}-${i}`}>\n          {i > 0 && separator != null && <span className=\"text-xs text-muted-foreground\">{separator}</span>}\n          <kbd className=\"cue-kbd\">{key}</kbd>\n        </React.Fragment>\n      ))}\n    </kbd>\n  );\n}\n\nexport { Kbd, KbdGroup };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/kbd",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}