Kbd

Keyboard shortcut and key combination display. Renders semantic HTML element with consistent styling for keys and shortcuts.

AccessibleDark Mode2 SizesSemanticLightweight

Install

$npx react-principles add kbd

Live Demo

Explore all variants and interactive states in Storybook.

Open Storybookopen_in_new

Common Keys

⌘CtrlShiftAltEnterEscTab

Key Combinations

Search⌘K

Copy⌘C

Save⌘S

Size Variants

Small:⌘K

Medium:⌘K

Inline Usage

Press ? to see all available keyboard shortcuts. Use Esc to close any dialog or dropdown. Navigate with ↑ ↓ ← → keys.

Code Snippet

src/ui/Kbd.tsx

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

// Single key
<Kbd>⌘</Kbd>

// Key combination
<span className="inline-flex items-center gap-1">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</span>

// With description
<div className="flex items-center gap-2">
  <span>Search</span>
  <Kbd size="sm">⌘</Kbd>
  <Kbd size="sm">K</Kbd>
</div>

Copy-Paste (Single File)

Kbd.tsx

import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

// ─── Types ────────────────────────────────────────────────────────────────────

export type KbdSize = "sm" | "md";

export interface KbdProps extends HTMLAttributes<HTMLElement> {
  size?: KbdSize;
}

// ─── Constants ────────────────────────────────────────────────────────────────

const SIZE_CLASSES: Record<KbdSize, string> = {
  sm: "text-[10px] px-1.5 py-0.5 font-medium",
  md: "text-xs px-2 py-1 font-medium",
};

const BASE_CLASSES =
  "inline-flex items-center justify-center " +
  "rounded-sm " +
  "border border-slate-200 dark:border-[#1f2937] " +
  "bg-white dark:bg-[#0d1117] " +
  "text-slate-700 dark:text-slate-300 " +
  "font-mono " +
  "transition-colors";

// ─── Component ────────────────────────────────────────────────────────────────

export const Kbd = forwardRef<HTMLElement, KbdProps>(
  function KbdRoot({ size = "md", className, children, ...rest }, ref) {
    return (
      <kbd
        ref={ref}
        className={cn(BASE_CLASSES, SIZE_CLASSES[size], className)}
        {...rest}
      >
        {children}
      </kbd>
    );
  }
);

Props

Extends all native HTMLElement attributes.

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"md"`	Size of the key display. sm is compact (10px), md is default (12px).
`className`	`string`	`—`	Additional CSS classes to apply (merged with base styles).

React Principles

Kbd