Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Arrow Keys with Icons
A React keyboard display showing arrow keys with directional icons using shadcn/ui KbdGroup and Lucide React for navigation documentation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Arrows need no translation—direction is universal. This React pattern shows KbdGroup with four Kbd components containing ArrowUp, ArrowDown, ArrowLeft, and ArrowRight icons from Lucide React—icon-only representation of navigation keys. Built with shadcn/ui Kbd components, it's perfect for navigation tutorials, game controls, carousel documentation, list navigation, scroll instructions, or any interface teaching directional keyboard movement.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Arrow Keys Row
Arrow keys text only
Enter with Icon
Icon with text label
Unicode Symbols
Unicode arrow symbols
Editing Keys
Home, End, PgUp, PgDn keys
Carousel
Carousel with arrow nav
Key Sequence
Sequential key presses
Questions you might have
React kbd - Delete with Icon
A React keyboard key displaying Delete with X icon using shadcn/ui Kbd and Lucide React for visual delete key representation
React kbd - Command with Icon
A React keyboard shortcut displaying Command key with cloverleaf icon using shadcn/ui KbdGroup and Lucide React for Mac shortcut documentation