Kbd

Used to display textual user input from keyboard.

⌘K

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/kbd.json

Usage

Use Kbd for single keys and KbdGroup for shortcuts.

import { Kbd, KbdGroup } from "@/components/kbd/kbd";

export function Example() {
  return (
    <>
      <Kbd>⌘</Kbd>

      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </>
  );
}

Styles adapt inside tooltips via in-data-[slot=tooltip-content] rules.