Kbd

A key drawn as a keycap, in figures that line up down a column of shortcuts.

Search⌘K
New chat⌘⇧O
CloseEsc

The idea

A raised cap with a lip along its foot, so it reads as something you press rather than a word in a box. Keys pressed together sit side by side with a hairline gap rather than a plus sign, which is how they look on a keyboard and how a menu's shortcut column is scanned.

Install

terminal1 line

npm i mihirmodi-ui motion

The tokens, the theme script and the routing provider are a one-time job — see Setup. Or skip the package entirely and take the source at the foot of this page.

Usage

Kbd — usage4 lines

import { Kbd } from "mihirmodi-ui";

<Kbd keys={["⌘", "K"]} />
<Kbd>Esc</Kbd>

Props

Prop	Type	Notes
keysstring[]	string[]	Several keys pressed together: `["⌘", "K"]`.
childrenReactNode	ReactNode	Or a single key.

Source

Exactly what the package ships — this is read out of the source at build time, not a copy. Take it and adapt it if you would rather not add a dependency.

packages/ui/src/components/actions/Kbd.tsx30 lines

import type { ReactNode } from "react";

export type KbdProps = {
  /** One key, or several pressed together: `["⌘", "K"]`. */
  keys?: string[];
  children?: ReactNode;
  className?: string;
};

/**
 * A key, drawn as a key: a raised cap with a lip along its foot, in tabular
 * figures so a column of shortcuts lines up. Several keys pressed together sit
 * in one `<kbd>` with a hairline gap between caps rather than a "+", which is
 * how a keyboard looks and how a menu's shortcut column is read.
 */
export function Kbd({ keys, children, className = "" }: KbdProps) {
  const caps = keys ?? [children];
  return (
    <kbd className={`inline-flex items-center gap-[3px] font-sans ${className}`}>
      {caps.map((k, i) => (
        <span
          key={i}
          className="inline-flex h-5 min-w-5 items-center justify-center rounded-[5px] border-[0.5px] border-gray-alpha-400 bg-background-100 px-1 text-[11px] font-medium leading-none tabular-nums text-muted shadow-[inset_0_-1px_0_var(--color-gray-alpha-300)]"
        >
          {k}
        </span>
      ))}
    </kbd>
  );
}