{"name":"kbd","title":"Kbd","description":"Used to display textual user input from keyboard.","installCommand":"bunx marko-ui add kbd -y","usageTags":"<Kbd>","importSnippet":"import Kbd from \"@/components/ui/kbd/kbd.marko\";","usageSnippet":"<Kbd>Ctrl</Kbd>","tags":["Kbd","KbdGroup"],"parts":[],"props":[],"events":[],"keyboard":[],"accessibilityNotes":["`Kbd` renders a native `<kbd>` element, which the accessibility tree exposes as textual content (not an interactive control) — screen readers announce its text but do not treat it as a button or landmark.","`Kbd` sets `pointer-events-none` since it displays a static key/shortcut label rather than something clickable; wrap it in a `Button` or `Tooltip` trigger when the underlying action IS clickable, rather than making the `Kbd` itself interactive.","Neither `Kbd` nor `KbdGroup` exposes a machine `dir` prop — pass `dir=\"rtl\"` as a plain native attribute on `Kbd`, `KbdGroup`, or a wrapping element; layout mirrors via Tailwind's logical-property utilities with no component changes required."],"examples":[{"id":"kbd-demo","title":"Basic","source":"import Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\nimport KbdGroup from \"@marko-ui/shadcn/ui/kbd/group.marko\";\n\n<div class=\"flex flex-col items-center gap-4\">\n  <KbdGroup>\n    <Kbd>⌘</Kbd>\n    <Kbd>⇧</Kbd>\n    <Kbd>⌥</Kbd>\n    <Kbd>⌃</Kbd>\n  </KbdGroup>\n  <KbdGroup>\n    <Kbd>Ctrl</Kbd>\n    <span>+</span>\n    <Kbd>B</Kbd>\n  </KbdGroup>\n</div>","description":"Group individual keys with `KbdGroup`."},{"id":"kbd-group","title":"Group","source":"import Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\nimport KbdGroup from \"@marko-ui/shadcn/ui/kbd/group.marko\";\n\n<div class=\"flex flex-col items-center gap-4\">\n  <p class=\"text-muted-foreground text-sm\">\n    Use\n    <KbdGroup>\n      <Kbd>Ctrl + B</Kbd>\n      <Kbd>Ctrl + K</Kbd>\n    </KbdGroup>\n    to open the command palette\n  </p>\n</div>","description":"Use `KbdGroup` to group keyboard keys together inside a sentence."},{"id":"kbd-button","title":"Button","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\n\n<div class=\"flex flex-wrap items-center gap-4\">\n  <Button type=\"button\" variant=\"outline\" size=\"sm\" class=\"pr-2\">\n    Accept\n    <Kbd>⏎</Kbd>\n  </Button>\n  <Button type=\"button\" variant=\"outline\" size=\"sm\" class=\"pr-2\">\n    Cancel\n    <Kbd>Esc</Kbd>\n  </Button>\n</div>","description":"Use `Kbd` inside a `Button` component to display a keyboard key inside a button."},{"id":"kbd-tooltip","title":"Tooltip","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport ButtonGroup from \"@marko-ui/shadcn/ui/button-group/button-group.marko\";\nimport Tooltip from \"@marko-ui/shadcn/ui/tooltip/tooltip.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\nimport KbdGroup from \"@marko-ui/shadcn/ui/kbd/group.marko\";\n\n<div class=\"flex flex-wrap gap-4\">\n  <ButtonGroup>\n    <Tooltip>\n      <@trigger|props|>\n        <Button type=\"button\" ...props size=\"sm\" variant=\"outline\">Save</Button>\n      </@trigger>\n      Save Changes\n      <Kbd>S</Kbd>\n    </Tooltip>\n    <Tooltip>\n      <@trigger|props|>\n        <Button type=\"button\" ...props size=\"sm\" variant=\"outline\">Print</Button>\n      </@trigger>\n      Print Document\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <Kbd>P</Kbd>\n      </KbdGroup>\n    </Tooltip>\n  </ButtonGroup>\n</div>","description":"Use `Kbd` inside a `Tooltip` component to display a tooltip with a keyboard key."},{"id":"kbd-input-group","title":"Input Group","source":"import InputGroup from \"@marko-ui/shadcn/ui/input-group/input-group.marko\";\nimport InputGroupInput from \"@marko-ui/shadcn/ui/input-group/input.marko\";\nimport InputGroupAddon from \"@marko-ui/shadcn/ui/input-group/addon.marko\";\nimport Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\n\n<div class=\"flex w-full max-w-xs flex-col gap-6\">\n  <InputGroup>\n    <InputGroupInput placeholder=\"Search...\"/>\n    <InputGroupAddon>\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n      </svg>\n    </InputGroupAddon>\n    <InputGroupAddon align=\"inline-end\">\n      <Kbd>⌘</Kbd>\n      <Kbd>K</Kbd>\n    </InputGroupAddon>\n  </InputGroup>\n</div>","description":"Use `Kbd` inside an `InputGroupAddon` component to display a keyboard key inside an input group."},{"id":"kbd-rtl","title":"RTL","source":"import Kbd from \"@marko-ui/shadcn/ui/kbd/kbd.marko\";\nimport KbdGroup from \"@marko-ui/shadcn/ui/kbd/group.marko\";\n\n<div dir=\"rtl\" class=\"flex flex-col items-center gap-4\">\n  <KbdGroup>\n    <Kbd>⌘</Kbd>\n    <Kbd>⇧</Kbd>\n    <Kbd>⌥</Kbd>\n    <Kbd>⌃</Kbd>\n  </KbdGroup>\n  <KbdGroup>\n    <Kbd>Ctrl</Kbd>\n    <span>+</span>\n    <Kbd>B</Kbd>\n  </KbdGroup>\n</div>","description":"Pass `dir=\"rtl\"` to a wrapping element to mirror `Kbd`/`KbdGroup` layout for right-to-left languages."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"kbd","subcomponents":[{"name":"group","props":[],"nativeAttributes":"kbd"}],"composition":"`Kbd` and `KbdGroup` are both plain, single-file elements (`<kbd>` and a styled wrapper `<div>` — no Zag machine, no sub-parts to import): `KbdGroup` renders `Kbd` children directly (`<KbdGroup><Kbd>...</Kbd><Kbd>...</Kbd></KbdGroup>`) — there is no separate `KbdKey` or similar sub-tag."}