{
  "name": "keycap",
  "title": "Keycap",
  "description": "A full-size physical key for scene moments · ceramic surface lit on its top edge, standing on a real wall of shadow. Press it and it bottoms out.",
  "category": "data-display",
  "install": {
    "command": "npx shadcn@latest add @clow/keycap",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "size": {
      "type": "select",
      "options": [
        "md",
        "lg"
      ],
      "default": "md",
      "description": "md = console key, lg = the hero key of the scene."
    },
    "children": {
      "type": "text",
      "default": "[ API ]"
    }
  },
  "agent": {
    "prompt": "Use Keycap as a scene prop: a big tactile key in a hero, bento card, or illustration of a console · \"[ API ]\", \"TX\", \"RUN\". It is a real button (renders <button type=\"button\">) and sinks when pressed, so it can carry an onClick, but its job is presence, not navigation. Do NOT confuse it with Kbd: Kbd is the tiny inline shortcut hint that sits inside sentences, menus, and tooltips (⌘K); Keycap never goes inline in text, and Kbd never plays the hero. Keep the label short and mono-flavored; uppercase reads best.",
    "examples": [
      "<Keycap size=\"lg\">[ API ]</Keycap>",
      "<div className=\"flex items-end gap-4\"><Keycap>TX</Keycap><Keycap size=\"lg\">RUN</Keycap><Keycap>RX</Keycap></div>"
    ]
  },
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/keycap",
    "markdown": "https://clow.cards/llms/keycap.md",
    "registryItem": "https://clow.cards/r/keycap.json"
  }
}
prop	type	default
size	md \| lg	md
children	text	[ API ]
Draw

Playground

Examples

Props
