Skip to main content
Version: Next

Kbd

Kbd renders one or more keycaps with consistent spacing, separators, and tone styling. It is useful for command hints, onboarding tips, keyboard cheat sheets, and compact menu annotations.

Basic usage​

Live Editor
function SaveHint() {
  return (
    <ThemeProvider>
      <Kbd keys={['Cmd', 'S']} />
    </ThemeProvider>
  );
}
Result
Loading...

Custom separator​

<Kbd keys={['ArrowDown', 'Enter']} separator="then" />

Child-derived keys​

<Kbd>
  <span>Shift</span>
  <span>K</span>
</Kbd>

Key props​

keys, separator, size, tone

Notes​

  • keys is the clearest API when the list is data-driven.
  • Child-derived keys are helpful when you want to compose richer labels inline.
  • Kbd is server-safe, so it can be rendered in docs and RSC shells without client wrappers.