104Get started
HextaUI

Kbd: Shortcuts

<KbdGroup /> splits a combo into one cap per key. A space starts a sequence, joined by separator. <Kbd /> with keys keeps the whole combo in one cap.

Command palette
CommandK
Move line up
OptionUp arrow
Close
Escape
Go to dashboard
GthenD
Save, as one cap
Command S
import { Kbd, KbdGroup } from "@/components/ui/kbd"

const shortcuts = [
  { label: "Command palette", keys: "mod+k" },
  { label: "Move line up", keys: "alt+up" },
  { label: "Close", keys: "escape" },
  { label: "Go to dashboard", keys: "g d" },
]

export function KbdShortcuts() {
  return (
    <dl className="grid w-full max-w-xs grid-cols-[1fr_auto] items-center gap-x-6 gap-y-3 text-sm">
      {shortcuts.map((shortcut) => (
        <div key={shortcut.keys} className="contents">
          <dt className="text-muted-foreground">{shortcut.label}</dt>
          <dd>
            <KbdGroup keys={shortcut.keys} />
          </dd>
        </div>
      ))}
      <dt className="text-muted-foreground">Save, as one cap</dt>
      <dd>
        <Kbd keys="mod+s" />
      </dd>
    </dl>
  )
}

Add this example

This adds the example as components/examples/kbd/shortcuts.tsx, together with the Kbd component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd-shortcuts.json

To add only the component, follow the Kbd installation.

Props in this example

The Kbd props this example sets, from the API reference.

Kbd

PropTypeDefault
keysKeys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers.
string–

KbdGroup

PropTypeDefault
keysKeys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. Spaces separate the steps of a sequence.
string–

Every prop is in the Kbd API reference.

More Kbd examples

See them all, with keyboard support and accessibility notes, on the Kbd page.

Related components