Shadcn.io is not affiliated with official shadcn/ui
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
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.
Arrow Keys Cross Pattern preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
Arrow Keys Horizontal
Horizontal left and right arrow Kbd components in KbdGroup showing ←→ symbols for lateral navigation built with shadcn/ui Kbd