Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Developers using Vim expect HJKL not arrows—editor documentation needs canonical navigation keys. This React pattern uses CSS grid-cols-4 displaying Kbd components showing H-J-K-L letters in horizontal row representing Vim's home row navigation where H (left), J (down), K (up), L (right). Built with shadcn/ui Kbd component and grid layout with gap-1 spacing, it's perfect for Vim documentation, modal editor tutorials, developer tool shortcuts, terminal emulator guides, or any developer-focused interface where HJKL represents standard navigation for Vim users.
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
WASD Gaming Keys
Gaming movement keys
Standard Kbd
Basic keyboard key display
Modifier Keys
Ctrl, Alt, Shift keys
Editor Shortcuts
Code editor shortcuts