ephemera

Kbd

Round typewriter keys for shortcuts.

Search⌘K
New letterCtrlN

Install

$ npx shadcn@latest add https://ephemera.kerrshift.com/r/kbd.json

Or copy the source below into components/ui/kbd.tsx. Core components need the Paper Theme and Radix where noted.

Usage

example.tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Props

PropTypeDefaultDescription
childrenReactNode—Key label.

Any other props are passed to the root element.

Fonts

Components read optional CSS variables and fall back to system fonts: --font-display, --font-receipt, --font-type, --font-hand and --font-stamp. This site uses Fraunces, IBM Plex Mono, Courier Prime, Caveat and Anton.

Source

components/ui/kbd.tsx
import * as React from "react";

/** A round typewriter key. */
export function Kbd({ className = "", style, ...props }: React.HTMLAttributes<HTMLElement>) {
  return (
    <kbd
      className={`inline-flex h-[26px] min-w-[26px] items-center justify-center rounded-full border-[1.5px] border-(--ink) bg-(--paper-raised) px-1.5 text-[11px] font-bold uppercase leading-none text-(--ink) ${className}`}
      style={{
        fontFamily: "var(--font-type, 'Courier New', ui-monospace, monospace)",
        boxShadow: "inset 0 0 0 2px var(--paper-raised), inset 0 0 0 3px var(--edge), 0 2px 0 var(--ink)",
        ...style,
      }}
      {...props}
    />
  );
}

export function KbdGroup({ className = "", ...props }: React.HTMLAttributes<HTMLSpanElement>) {
  return <span className={`inline-flex items-center gap-1 ${className}`} {...props} />;
}