Inline Hint Pill

PressKto open search
About this piece

Inline Hint Pill

Rounded pill that embeds a keycap between prefix and suffix copy for quick prompts.

Usage

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

import { Keyboard11 } from "@/components/beste/piece/keyboard11";

<Keyboard11
  prefix="Press"
  keys={[
    "⌘",
    "K"
  ]}
  suffix="to open search"
/>

More Keyboard pieces

View all Keyboard
Quick search
K

Keyboard Shortcut Hint

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

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.

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.

Enter your 6-digit PIN
1234567890

PIN Pad

Phone-style number pad with tactile keycaps and a row of filled dots tracking how many digits are entered.

BA
Unlock the secret

Key Sequence

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

⌘ plus K: Open command palette

Shortcut Press

Keycaps press down one after another, their shadows shrinking as they sink, and the matching action label fades in beside them before the next shortcut takes a turn.