{
  "name": "command-palette",
  "kind": "block",
  "primary": "card-ui",
  "page": "/catalog/ui-patterns/app/command-palette/command-palette.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<card-ui\n  style=\"max-width:560px;margin:0 auto\">\n  <section>\n    <input-ui placeholder=\"Search commands...\" prefix=\"magnifying-glass\"></input-ui>\n  </section>\n  <divider-ui></divider-ui>\n  <section>\n    <col-ui gap=\"3\">\n      <col-ui gap=\"1\">\n        <text-ui size=\"sm\" color=\"subtle\" weight=\"semibold\">Recent</text-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <icon-ui name=\"clock\" size=\"sm\" color=\"subtle\"></icon-ui>\n          <text-ui grow>Open command palette</text-ui>\n          <badge-ui text=\"⌘K\" variant=\"muted\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <icon-ui name=\"clock\" size=\"sm\" color=\"subtle\"></icon-ui>\n          <text-ui grow>New conversation</text-ui>\n          <badge-ui text=\"⌘N\" variant=\"muted\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <icon-ui name=\"clock\" size=\"sm\" color=\"subtle\"></icon-ui>\n          <text-ui grow>Toggle sidebar</text-ui>\n          <badge-ui text=\"⌘\\\" variant=\"muted\" size=\"sm\"></badge-ui>\n        </row-ui>\n      </col-ui>\n      <col-ui gap=\"1\">\n        <text-ui size=\"sm\" color=\"subtle\" weight=\"semibold\">Actions</text-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <icon-ui name=\"gear\" size=\"sm\" color=\"subtle\"></icon-ui>\n          <text-ui grow>Open settings</text-ui>\n          <badge-ui text=\"⌘,\" variant=\"muted\" size=\"sm\"></badge-ui>\n        </row-ui>\n        <row-ui gap=\"3\" align=\"center\">\n          <icon-ui name=\"question\" size=\"sm\" color=\"subtle\"></icon-ui>\n          <text-ui grow>Help and support</text-ui>\n          <badge-ui text=\"?\" variant=\"muted\" size=\"sm\"></badge-ui>\n        </row-ui>\n      </col-ui>\n    </col-ui>\n  </section>\n</card-ui>",
  "source": "catalog/ui-patterns/app/command-palette/command-palette.contents.html",
  "metadata": {
    "domain": "navigation",
    "description": "Command palette with search input, recent commands, and keyboard shortcut hints.",
    "keywords": [
      "command",
      "palette",
      "search",
      "input",
      "recent",
      "commands",
      "keyboard",
      "shortcut",
      "hints",
      "cmdk",
      "ctrl-k",
      "quick-access",
      "launcher",
      "actions"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "input",
      "component": "Input",
      "placeholder": "Search commands...",
      "prefix": "magnifying-glass"
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "input"
      ]
    },
    {
      "id": "divider",
      "component": "Divider"
    },
    {
      "id": "text",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "weight": "semibold",
      "textContent": "Recent"
    },
    {
      "id": "clock",
      "component": "Icon",
      "name": "clock",
      "size": "sm"
    },
    {
      "id": "text-2",
      "component": "Text",
      "textContent": "Open command palette"
    },
    {
      "id": "badge",
      "component": "Badge",
      "size": "sm",
      "text": "⌘K",
      "variant": "muted"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "clock",
        "text-2",
        "badge"
      ]
    },
    {
      "id": "icon",
      "component": "Icon",
      "name": "clock",
      "size": "sm"
    },
    {
      "id": "text-3",
      "component": "Text",
      "textContent": "New conversation"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "size": "sm",
      "text": "⌘N",
      "variant": "muted"
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "icon",
        "text-3",
        "badge-2"
      ]
    },
    {
      "id": "icon-2",
      "component": "Icon",
      "name": "clock",
      "size": "sm"
    },
    {
      "id": "text-4",
      "component": "Text",
      "textContent": "Toggle sidebar"
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "size": "sm",
      "text": "⌘\\",
      "variant": "muted"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "icon-2",
        "text-4",
        "badge-3"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "gap": "1",
      "children": [
        "text",
        "row",
        "row-2",
        "row-3"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "weight": "semibold",
      "textContent": "Actions"
    },
    {
      "id": "gear",
      "component": "Icon",
      "name": "gear",
      "size": "sm"
    },
    {
      "id": "text-6",
      "component": "Text",
      "textContent": "Open settings"
    },
    {
      "id": "badge-4",
      "component": "Badge",
      "size": "sm",
      "text": "⌘,",
      "variant": "muted"
    },
    {
      "id": "row-4",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "gear",
        "text-6",
        "badge-4"
      ]
    },
    {
      "id": "question",
      "component": "Icon",
      "name": "question",
      "size": "sm"
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Help and support"
    },
    {
      "id": "badge-5",
      "component": "Badge",
      "size": "sm",
      "text": "?",
      "variant": "muted"
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "3",
      "children": [
        "question",
        "text-7",
        "badge-5"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "gap": "1",
      "children": [
        "text-5",
        "row-4",
        "row-5"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "3",
      "children": [
        "column-2",
        "column-3"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "children": [
        "section",
        "divider",
        "section-2"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-4"
      ]
    },
    {
      "id": "root",
      "component": "Card",
      "children": [
        "section-3"
      ]
    }
  ]
}