About this block

Keyboard Shortcuts Panel sells craft through key caps. Two reference cards, everywhere and in a campaign, list eight shortcuts as rows of description and Kbd keys, including the two that carry product values, undo including sends for 60 seconds, and the question mark that opens this panel in the app. The lede limits the scope, the eight worth learning in week one.

The groups are one nested array rendered with the ui Kbd component. Shortcuts on a marketing page are a signal aimed at power users, tools that publish them tend to deserve them.

When to use

Reach for this block on product pages courting the keyboard demographic, the audience that evaluates tools by pressing question mark on day one. It pairs with feature-spotlight-zoom as craft evidence, details argued through artifacts rather than adjectives.

A natural flow around it on a Marketing Pro page:

Before

• Product tours showing the screens these keys drive

After

• Developer CTAs for the audience this block selected
• Footers closing the page

What you can display

One strong use is the week one shortcut set. Other panels:

• CLI commands. The eight commands of a developer tool in the same reference format.
• Slash commands. Chat product commands with their syntax.
• Editor gestures. A design tool modifier key reference.

Tip: include the shortcut that encodes a product value, undo for sends says more about the product than the other seven rows combined.