build69
build69  /  Components  /  Layout & Surfaces  /  kbd

kbd

v1.0.1Updated 20 Jul 2026

Platform-aware keyboard hint renderer: shows ⌘ on Mac, Ctrl on Windows / Linux, plus the formatShortcut + useIsMac helpers for shortcut display.

Preview

Live · 9 stories
DefaultOpen ↗
Why this is recommendedkbdkeyboardshortcuthint+2

The default, out-of-the-box kbd.

Recommended for+14
  • Inline shortcut hints in tooltips and menus
  • Command palette items
  • Quick-action labels
Tags+6
kbdkeyboardshortcuthintplatformdefault
Features+4
  • Platform-aware modifier rendering (⌘ vs Ctrl)
  • Exports Kbd component
  • formatShortcut(keys, isMac) helper
  • useIsMac() hook
Not recommended for−2
  • Long-form descriptions (use Typography)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "kbd" })

Usage

import { Kbd, useIsMac, formatShortcut } from '@/components/primitives/kbd';

<Kbd keys={['mod', 'k']} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
keys

Key tokens (mod / shift / k / enter …)

string[]yes

Related