blurrow/ui
data display

kbd

a little keycap for keyboard shortcuts.

⌘⇧k

press ⌘k to search

installation

new to blurrow? this sets up your project in one go: the package, the styles and the font. already done it? skip straight to usage. the installation page has the details.

bash
npx @blurrow/ui init
›rather own the code? copy the source instead

let the cli copy it, along with anything it needs:

bash
npx @blurrow/ui add kbd

or by hand: drop this file into components/ui and import from there.

components/ui/Kbd.tsxtsx
import { ReactNode } from "react";


export function Kbd({
  children,
  className = "",
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <kbd
      className={`inline-flex items-center justify-center min-w-[22px] h-[22px] px-1.5 rounded-md text-[11px] font-semibold text-neutral-500 ${className}`}
      style={{
        /* A keycap: lit top, solid 1.5px skirt below so it reads as pressable */
        background: "var(--face-light)",
        boxShadow:
          "0 0 3px rgba(17,17,17,0.136), 0 1.5px 1px rgba(17,17,17,0.12), 0 2px 3px -1px rgba(17,17,17,0.1), inset 0 2px 3px -2px rgba(255,255,255,1)",
        textShadow: "0 1px 0 rgba(255,255,255,0.9)",
      }}
    >
      {children}
    </kbd>
  );
}

usage

tsx
import { Kbd } from "@blurrow/ui";
tsx
<Kbd>⌘k</Kbd>
previous←avatarnexttable→