Arrow Cluster

Four-way directional pad with a pressed state that highlights one key at a time.

Navigate

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Keyboard6 } from "@/components/beste/piece/keyboard6";

<Keyboard6
  active="up"
  label="Navigate"
/>

More Keyboard pieces

View all Keyboard
WASD
Move

WASD Cluster

keyboard15

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

Modifier keys
Command
Option
Shift
Control

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

G
Leader
P
Go to project
Press in sequence

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

BA
Unlock the secret

Key Sequence

keyboard13

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

Porcelain · Moby
2:18 / 4:01

Media Keys

keyboard16

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

Enter your 6-digit PIN
1234567890

PIN Pad

keyboard12

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