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: ⌃ +C Ctrl +C · Paste: ⌃ +V Ctrl +V · Undo: ⌃ +Z Ctrl +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: ⌘ +K Ctrl +K · Command palette: ⌘ +⇧ +P Ctrl +⇧ +P · Inspector: ⌥ +⇧ +I Alt +⇧ +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 / Esc Esc

#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.

⌘ +⇧ +P Ctrl +⇧ +P ⌘ +S Ctrl +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.

⌃ +⇧ +I Ctrl +⇧ +I ⌘ +K Ctrl +K

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

`<Kbd>` Props

Implementation: Kbd.astro

#children string

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

#keys string[]

Explicit array of key names. Overrides children parsing.

#tip string

Description shown on hover via Tooltip.

Kbd