Kbd

Free

A standalone keyboard-key badge that visually represents keys and shortcuts (⌘, Ctrl, K). Renders a semantic <kbd> element with a subtle physical key look that adapts to light and dark themes.

Installation

Install via CLI

npx @moontra/moonui-cli add kbd

Usage

⌘K

Examples

Single Key

Represent an individual key or a simple combined glyph.

⌘KEscEnterTab

Key Combinations

Compose multiple Kbd elements to show a shortcut. Add a plus sign or spacing between them for readability.

⌘KCtrl+Shift+P

Inline in Text

Kbd sits naturally inside a sentence, so you can document shortcuts directly within body copy.

Press ⌘ K to open the command palette, then hit Esc to close it.

Sizes

Two sizes — sm and md — to match the surrounding typography.

⌘K⌘K

MoonUI

⌘K