shadcn.io is an independent project built on shadcn/ui
W sits above A, S, and D on a three-column grid, with empty cells beside W. The letters are caps, not controls. Nothing listens for them.
Use WASD when players expect those letters. Show arrow keys for a general app. Clicks still need a Button. In Vue, Ark UI does not move a character.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4">
<div class="grid w-fit grid-cols-3 gap-1">
<div></div>
<Kbd>W</Kbd>
<div></div>
<Kbd>A</Kbd>
<Kbd>S</Kbd>
<Kbd>D</Kbd>
</div>
</div>FAQ
When should I show WASD instead of arrow keys?
For games and 3D or canvas views where the right hand uses the mouse. For interfaces and lists, show the arrow keys. Supporting both is common.
Why lay WASD out like the arrow keys?
The keys form the same shape on the keyboard, W above and A, S, D below, and the layout makes the mapping to up, left, down and right obvious.
How do WASD controls work on other keyboard layouts?
On AZERTY, the same positions are Z, Q, S and D. Read event.code (KeyW, KeyA…) instead of event.key: it names the physical position, so the controls work on any layout. Show the user's own letters if you can.
Should the hint include Space for jump?
If your game uses it, add a wide Space cap below the cluster. Keep the other keys, like Shift to run or E to interact, in a separate list so the movement cluster stays readable.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
