Function Row

F1Help
F2Rename
F3Find next
F4Close
F5Reload
About this piece

Function Row

Horizontal strip of F-keys, each annotated with the action it triggers.

Usage

The import and the props worth knowing about, in one place.

import { Keyboard10 } from "@/components/beste/piece/keyboard10";

<Keyboard10
  keys={[
    {
      "key": "F1",
      "action": "Help"
    },
    {
      "key": "F2",
      "action": "Rename"
    },
    {
      "key": "F3",
      "action": "Find next"
    },
    {
      "key": "F4",
      "action": "Close"
    },
    {
      "key": "F5",
      "action": "Reload"
    }
  ]}
/>

More Keyboard pieces

View all Keyboard
Go to fileJump to any file in the workspace
P

Command Palette Row

Raycast-style action row with leading icon, description, and a trailing shortcut combo.

Keyboard shortcuts
Open search
K
New file
N
Toggle sidebar
B
Switch workspace
O

Shortcut Cheatsheet

Titled panel listing several actions with their key combos stacked on the right.

BA
Unlock the secret

Key Sequence

Row of small tactile keycaps laid out in order, great for Konami-style cheat codes or macro combos.

Quick search
K

Keyboard Shortcut Hint

Raised kbd keys joined with a plus separator. Any combo works.

Porcelain · Moby
2:18 / 4:01

Media Keys

Row of tactile transport keycaps with the center play/pause lit in primary, flanked by track name and elapsed time.

G
Leader
P
Go to project
Press in sequence

Chord Sequence

Vim-style multi-step combo showing keys separated by arrows with per-step labels.