Media Keys

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

Porcelain · Moby
2:18 / 4:01

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

Import & use
import { Keyboard16 } from "@/components/beste/piece/keyboard16";

<Keyboard16
  state="playing"
  track="Porcelain · Moby"
  elapsed="2:18 / 4:01"
/>

More Keyboard pieces

View all Keyboard
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.

Command

Hero Keycap

keyboard4

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

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.

Space
Press to continue

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

F1Help
F2Rename
F3Find next
F4Close
F5Reload

Function Row

keyboard10

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

Navigate

Arrow Cluster

keyboard6

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