Kbd

Render keyboard shortcuts as styled key caps. Parses +-separated combinations, maps key names to symbols (⌘, ⇧, ⌥), and swaps modifiers per platform.

Import

import { Kbd } from "@nu-appdev/northwestern-starlight-theme/components";

Basic Usage

Pass key combinations as children, separated by +.

Copy: ⌃+CCtrl+C · Paste: ⌃+VCtrl+V · Undo: ⌃+ZCtrl+Z

<Kbd>Ctrl+C</Kbd>
<Kbd>Ctrl+V</Kbd>
<Kbd>Ctrl+Z</Kbd>

Platform-Aware Modifiers

Use Mod, Command, Ctrl, Alt, or Option in the key string. Platform is detected automatically — Mac users see ⌘, Windows/Linux users see Ctrl.

Open search: ⌘+KCtrl+K · Command palette: ⌘+⇧+PCtrl+⇧+P · Inspector: ⌥+⇧+IAlt+⇧+I

<Kbd>Mod+K</Kbd>
<Kbd>Mod+Shift+P</Kbd>
<Kbd>Alt+Shift+I</Kbd>

Key Symbol Mapping

Key names map to standard symbols. Unrecognized names render as-is (A, F12). Modifier symbols change per platform.

Modifiers

#Command / Cmd / Meta⌘Ctrl

#Control / Ctrl⌃Ctrl

#Option / Alt⌥Alt

#Shift⇧Shift

#Mod⌘Ctrl

Actions

#Enter / Return↵

#Backspace⌫

#Delete⌦

#Escape / EscEsc

#Tab⇥

#Space␣

#CapsLock⇪

Navigation

#Up / Down / Left / Right↑ ↓ ← →

#PageUp / PageDown⇞ ⇟

#Home / End↖ ↘

With Description

The tip prop wraps the shortcut in a <Tooltip/>, showing a description on hover.

⌘+⇧+PCtrl+⇧+P ⌘+SCtrl+S

<Kbd tip="Open command palette">Mod+Shift+P</Kbd>
<Kbd tip="Save file">Mod+S</Kbd>

Explicit Keys Array

Use the keys array to specify each key explicitly.

⌃+⇧+ICtrl+⇧+I ⌘+KCtrl+K

<Kbd keys={["Ctrl", "Shift", "I"]} />
<Kbd keys={["Command", "K"]} />

`<Kbd>` Props

Implementation: Kbd.astro

#childrenstring

Key combination string. Parsed on + into individual keys. Key names are mapped to symbols.

#keysstring[]

Explicit array of key names. Overrides children parsing.

#tipstring

Description shown on hover via Tooltip.

Kbd