Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Arrow Keys Horizontal
Horizontal left and right arrow Kbd components in KbdGroup showing ←→ symbols for lateral navigation built with shadcn/ui Kbd
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some controls only need horizontal movement—left/right navigation without vertical clutter. This React pattern uses KbdGroup wrapping two Kbd components showing ← and → arrow symbols creating grouped horizontal navigation indicator. Built with shadcn/ui Kbd and KbdGroup for visual grouping, it's perfect for carousel controls, horizontal scrolling documentation, pagination shortcuts, slider instructions, timeline navigation, or any interface explaining left-right movement where simplified two-key display communicates directional input clearly.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Arrow Keys Cross Pattern
Full 4-direction arrow layout
WASD Gaming Keys
Gaming movement keys
Vim Navigation Keys
HJKL vim-style navigation
Kbd Group
Grouped keyboard keys
Standard Kbd
Basic keyboard key display
Carousel Controls
Carousel navigation patterns
Questions you might have
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
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