Kbd React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Kbd from @/components/ui/kbd.

import { Search } from "lucide-react"
import { Kbd } from "@/components/ui/kbd"

export function SearchHint() {
  return (
    <div className="flex items-center gap-2 text-sm text-muted-foreground">
      <Search className="size-4" />
      <span className="flex-1">Search listings</span>
      <Kbd shortcut="mod+k" hideOnTouch />
    </div>
  )
}

export function CloseHint() {
  return (
    <p className="text-sm text-muted-foreground">
      Press <Kbd>Esc</Kbd> to close the window, or <Kbd keys={["G", "I"]} separator="then" /> for the Inbox.
    </p>
  )
}

Props

• childrendefault "Esc"
  ReactNode

  A single key label, used when there is no shortcut and no keys. Glyphs like ⌘ or ↵ get a spoken name for screen readers.

• shortcutdefault ""
  string

  A combo in mod+k notation: "mod+k", "shift+mod+p", "alt+n", "mod+enter", "/". mod is ⌘ on Apple devices and Ctrl elsewhere. Wins over keys and children; an unparseable value falls back to them.

• keys
  string[]

  One cap per entry, shown as written. For sequences (["G", "I"] with separator "then") and hints that are not one combo (["↑", "↓"]). Used when there is no shortcut.

• separatordefault ""
  ReactNode

  Rendered between caps when they are not combined, like "+" or "then". A word separator is also read out ("G then I"); a symbol is not.

• srLabeldefault ""
  string

  What screen readers hear instead of the caps. By default the combo is spelled out in English ("Shift Command P", "Control K", "G then I"); pass a translation on localized pages.

• variantdefault "soft"
  "soft" | "outline" | "solid" | "ghost"

  soft is the quiet gray key for hints next to fields and buttons. outline draws a border, solid is a raised key like a real keyboard, ghost is text only for menus and inverted surfaces like tooltips.

• sizedefault "md"
  "sm" | "md" | "lg"

  Cap height 16 / 20 / 24px with a matching minimum width, 10 / 11 / 12px type and a radius that scales along.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Semantic color. neutral is the gray key from the design system; the other tones tint the key, and a held key (listen) fills with the tone.

• colordefault ""
  string

  Any CSS color. Replaces the tone in every variant; text on a solid key turns black or white by lightness.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled per size. md is 4 / 5 / 6px; full makes round caps.

• combineddefault false
  boolean

  The whole combo in one cap (⌘K, Ctrl+K) instead of one cap per key. Reads well in tight rows and menus.

• platformdefault "auto"
  "auto" | "apple" | "other"

  Forces a notation, for docs pages that show both. auto renders the Windows and Linux form on the server and during hydration, then swaps to the device's.

• hideOnTouchdefault false
  boolean

  Hides the keys on touch screens, where a keyboard hint means nothing.

• listendefault false
  boolean

  Caps sink and light up while the matching keys are held on a physical keyboard, and the root gets data-pressed once the whole combo is down. It only watches; it never binds or blocks a key.

• classNames
  Partial<Record<"key" | "separator", string>>

  Extra classes for every cap (also the single cap) and for the separators.

• className
  string

  Extra classes for the root: the <kbd> for one cap, the group span for several. Merged last.

FAQ

Used in

More React data display components