Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Arrow Keys Cross Pattern
Arrow key Kbd components arranged in inverted-T cross pattern layout using CSS grid with arrow symbols built with shadcn/ui Kbd
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Documentation needs to show navigation controls—arrow keys in familiar layout help users understand directional input. This React pattern uses CSS grid-cols-3 with empty divs positioning Kbd components showing ↑←↓→ symbols in standard inverted-T keyboard layout matching physical arrow key arrangement. Built with shadcn/ui Kbd component and grid layout with gap-1 spacing, it's perfect for keyboard shortcut documentation, game controls, navigation instructions, tutorial overlays, or any interface explaining directional input where visual arrow key representation aids comprehension.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Horizontal Arrow Keys
Left and right arrows grouped
WASD Gaming Keys
Gaming movement keys
Vim Navigation Keys
HJKL vim-style navigation
Standard Kbd
Basic keyboard key display
Modifier Keys
Ctrl, Alt, Shift keys
Keyboard Shortcuts
Shortcut combination display
Questions you might have
React Item with Media and Icon
A React clickable list item with BadgeCheckIcon media, title, and ChevronRightIcon using asChild anchor and size-sm built with shadcn/ui Item
React kbd - Arrow Keys Horizontal
Horizontal left and right arrow Kbd components in KbdGroup showing ←→ symbols for lateral navigation built with shadcn/ui Kbd