Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Enter with Icon
A React keyboard key displaying Enter with CornerDownLeft icon using shadcn/ui Kbd and Lucide React for visual enter key representation
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text alone doesn't capture the Enter key's distinctive shape. This React pattern shows Kbd with CornerDownLeft icon from Lucide React plus Enter text—visually represents the iconic L-shaped arrow on physical keyboards. Built with shadcn/ui Kbd component, it's perfect for form documentation showing submit shortcuts, chat interfaces with send actions, command line tutorials, or any context where the distinctive Enter key shape aids recognition.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Delete with Icon
Del key with Delete icon
Unicode Symbols
Unicode arrow symbols
Special Keys
Esc, Tab, Enter text only
Keyboard Shortcut
Standard shortcut display
Form
Form with Enter to submit
Icon Button
Button with icon
Questions you might have
React Extra Large Kbd
Extra large Kbd components with h-12 height and text-2xl font size for maximum visibility keyboard shortcut display built with shadcn/ui
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