Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - WASD Gaming Keys
WASD gaming movement Kbd components arranged in inverted-T pattern using CSS grid showing W-A-S-D letters built with shadcn/ui Kbd
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Gamers expect WASD not arrows—gaming documentation needs familiar controls. This React pattern uses CSS grid-cols-3 with empty divs positioning Kbd components showing W-A-S-D letters in inverted-T layout matching gaming convention for left-hand movement. Built with shadcn/ui Kbd component and grid layout with gap-1 spacing, it's perfect for game tutorials, PC gaming documentation, FPS control guides, game settings explanations, or any gaming interface where WASD represents standard movement controls that gamers immediately recognize.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Arrow Keys Cross Pattern
Traditional arrow key layout
Horizontal Arrow Keys
Left and right arrows grouped
Vim Navigation Keys
HJKL vim-style navigation
Standard Kbd
Basic keyboard key display
Modifier Keys
Ctrl, Alt, Shift keys
Game Controls
Gaming control documentation
Questions you might have
React kbd - Arrow Keys Horizontal
Horizontal left and right arrow Kbd components in KbdGroup showing ←→ symbols for lateral navigation built with shadcn/ui Kbd
React kbd - Vim Navigation Keys
Vim-style HJKL navigation Kbd components in horizontal row showing H-J-K-L letters for modal editor movement built with shadcn/ui Kbd