Keyboard Shortcuts — cinder playground

Overview

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

Usage

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

<div style="max-width: 28rem;">
  <KeyboardShortcuts
    heading="Keyboard Shortcuts"
    groups={[
      {
        label: 'General',
        shortcuts: [
          { action: 'Open command palette', keys: ['Ctrl', 'K'], keysLabel: 'Control plus K' },
          { action: 'Search', keys: ['Ctrl', 'F'], keysLabel: 'Control plus F' },
          { action: 'Go back', keys: ['Alt', '←'], keysLabel: 'Alt plus Left arrow' },
        ],
      },
      {
        label: 'Editing',
        shortcuts: [
          { action: 'Save', keys: ['Ctrl', 'S'], keysLabel: 'Control plus S' },
          { action: 'Undo', keys: ['Ctrl', 'Z'], keysLabel: 'Control plus Z' },
          { action: 'Redo', keys: ['Ctrl', 'Shift', 'Z'], keysLabel: 'Control plus Shift plus Z' },
        ],
      },
    ]}
  />
</div>

Guidance

Use When

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

Avoid When

Showing a single inline shortcut hint — use shortcut-hint instead.

Live preview

When to use

Use when

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

Avoid when

Showing a single inline shortcut hint — use shortcut-hint instead.

Examples

Command palette shortcuts reference

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

Props

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