Shadcn.io is not affiliated with official shadcn/ui
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
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.
Vim Navigation Keys preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.