Lumeo

Kbd

Display keyboard shortcuts and register global hotkeys.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Kbd />

When to Use

  • Displaying keyboard shortcuts in menus, tooltips, or documentation
  • Documenting keybindings in help pages or onboarding guides
  • Registering global hotkeys for power-user workflows
Ctrl + K
Ctrl + Shift + P
Esc Enter
Small: Ctrl + S
Default: Ctrl + S
Large: Ctrl + S
Open command palette
Ctrl + K
Search
Ctrl + F
Save
Ctrl + S
Close Esc

Pick a size to see it applied live.

Ctrl + K
Ctrl + K
triggered 0 time(s)

API Reference

Kbd

Prop Type Default Description
ChildContentRenderFragment?nullKey label text (e.g. "Ctrl", "K").
SizeKbdSizeDefaultSize of the keyboard key. Values: Sm, Default, Lg.
Classstring?nullAdditional CSS classes.
AdditionalAttributesDictionary<string, object>?nullAdditional HTML attributes.

KeyboardShortcutService

Method Signature Description
RegisterAsyncRegisterAsync(keys, callback)Registers a keyboard shortcut. Returns IAsyncDisposable to unregister.
  • Badge — For labeling and categorizing items with small inline indicators
  • Tooltip — For showing shortcut hints alongside action descriptions on hover