Shadcn.io is not affiliated with official shadcn/ui
Arrow Keys with Icons
A React keyboard display showing arrow keys with directional icons using shadcn/ui KbdGroup and Lucide React for navigation documentation
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.
Arrow Keys with Icons preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.