46 / Docs

Kbd

A keyboard chord rendered with the right glyphs for the reader's platform, and spoken in words.

Open the palette with Ctrl plus K

Send without a newline using Ctrl plus Enter

Step through results with Up arrow and Down arrow

Dismiss anything with Esc

"use client"

import { Kbd } from "mischief-ui/kbd"

export function KbdDemo() {
  return (
    <div className="text-muted-foreground grid gap-3 text-sm">
      <p>
        Open the palette with <Kbd keys="Mod+K" />
      </p>
      <p>
        Send without a newline using <Kbd keys="Mod+Enter" />
      </p>
      <p>
        Step through results with <Kbd keys={["Up"]} /> and{" "}
        <Kbd keys={["Down"]} />
      </p>
      <p>
        Dismiss anything with <Kbd keys="Escape" />
      </p>
    </div>
  )
}

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/kbd

import { Kbd } from "mischief-ui/kbd"

Or paste it in yourself. The source imports the shared cn helper from @/lib/utils, so point that at your own copy.

registry/default/kbd/kbd.tsx

1"use client"2 3import * as React from "react"4 5import { cn } from "@/lib/utils"6 7export type KbdProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {8  /** A chord such as "Mod+K", or the keys already split apart. */9  keys: string | readonly string[]10  /** Overrides platform detection. */11  platform?: "auto" | "mac" | "other"12  separator?: React.ReactNode13}14

Usage

export function Hint() {
  return (
    <p>
      Press <Kbd keys="Mod+K" /> to search.
    </p>
  )
}

What each token becomes

Write the chord the way you think about it and let the platform decide how it is spelled. Mod is the one that matters: it is Command on Apple platforms and Control everywhere else, which is exactly the distinction most shortcut hints get wrong by hard-coding one of them.

Token	Apple	Elsewhere
`Mod`	⌘	Ctrl
`Alt or Option`	⌥	Alt
`Shift`	⇧	Shift
`Ctrl`	⌃	Ctrl
`Enter`	↵	Enter
`Escape`	Esc	Esc

Anything unrecognised is passed through, with a single letter upper-cased, so Mod+K and Mod+Shift+P both read correctly without a special case.

It only says the shortcut

Nothing is bound. This renders a hint and no more, so the keys shown and the keys that work are kept in step by you. Where a component already owns the shortcut -- the command palette and its Mod+K, say -- name the same chord here rather than inventing a second source of truth.

<p>
  Press <Kbd keys="Mod+K" /> to search, or <Kbd keys={["Escape"]} /> to close.
</p>

API

keysstring | string[]A chord such as "Mod+K", or the keys already split apart.

platform"auto" | "mac" | "other"Overrides detection. Defaults to auto.

separatorReactNodePlaced between keys. Omitted by default.

Accessibility

Glyphs are decoration: the chord is also written out for a screen reader, so it hears "Command plus K" rather than a symbol it cannot pronounce. Detection runs through useSyncExternalStore, so the server renders the portable names and the client swaps in the Mac glyphs on hydration. Mod resolves to Command on Apple platforms and Control everywhere else.