Pieces/Keyboard(16)

Keyboard pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

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.

WASD
Move

WASD Cluster

Gaming movement cluster with W on top and A S D on the second row, lighting the active key in primary.

Press space to continue
Space
or click anywhere

Spacebar

Long-format spacebar keycap with a soft shadow, bracketed by a prompt above and a hint caption below.

BA
Unlock the secret

Key Sequence

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

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.

PressKto open search

Inline Hint Pill

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

F1Help
F2Rename
F3Find next
F4Close
F5Reload

Function Row

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

Caps Lock
OnType in uppercase

Caps Lock LED

Toggle key with an inset LED indicator that lights up when the lock is engaged.

Modifier keys
Command
Option
Shift
Control

Modifier Cluster

macOS modifier symbols laid out side by side with their names printed below.

Space
Press to continue

Active Keypress

Lit-up key with a pinging halo behind it and a caption beneath to cue the user.

Navigate

Arrow Cluster

Four-way directional pad with a pressed state that highlights one key at a 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.

Command

Hero Keycap

Large tactile keycap with subtle shadow and a caption reading underneath.

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.

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.

Quick search
K

Keyboard Shortcut Hint

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

Markdown version