Kbd

The Kbd component displays keyboard key representations and keyboard shortcuts in a visually distinct way.

Usage

import { Kbd } from "@rhinolabs/ui";

export default function KbdDemo() {
  return (
    <div>
      <p>
        Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open search
      </p>
      <p>
        <Kbd.Group>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </Kbd.Group>
      </p>
    </div>
  );
}

Examples

Single Key

<Kbd>Enter</Kbd>

Key Combination

<Kbd.Group>
  <Kbd>Shift</Kbd>
  <Kbd>+</Kbd>
  <Kbd>P</Kbd>
</Kbd.Group>

With Icons

<Kbd>
  <CommandIcon className="size-3" />
</Kbd>

Accessibility

The Kbd component displays keyboard shortcuts in an accessible way.