Typography

KeyboardShortcuts

Grouped keyboard-shortcut reference that renders key combos via Kbd with accessible labels not reliant only on visual keycaps.

import { KeyboardShortcuts } from '@lostgradient/cinder/keyboard-shortcuts';
shortcutkeyboard
01

Overview

Grouped keyboard-shortcut reference that renders key combos via Kbd with accessible labels not reliant only on visual keycaps.

Usage

svelte 
<script lang="ts">
  import { KeyboardShortcuts } from '@lostgradient/cinder/keyboard-shortcuts';
</script>

Guidance

Use When

  • Displaying a reference panel of keyboard shortcuts grouped by feature area.
  • Embedding a shortcut table inside a modal, sheet, popover, or help page.

Avoid When

  • Showing a single inline shortcut hint — use shortcut-hint instead.
Live preview
02

When to use

Use when
  • Displaying a reference panel of keyboard shortcuts grouped by feature area.
  • Embedding a shortcut table inside a modal, sheet, popover, or help page.
Avoid when
  • Showing a single inline shortcut hint — use shortcut-hint instead.
03

Examples

Command palette shortcuts reference

A grouped shortcut reference panel suitable for embedding in a modal or sheet.

04

Props

Props for keyboard-shortcuts
Name Type Default Required Bindable Description
groups KeyboardShortcutGroup[] req Groups of shortcuts to display.
heading text Optional heading for the entire shortcuts panel.
children snippet Snippet rendered above all groups.