Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Command with Icon
Next: Required Label

Unicode Symbols

A React keyboard display showing Enter, Delete, and Tab using Unicode symbols with shadcn/ui Kbd for lightweight key representation

Sometimes SVG icons are overkill—Unicode works. This React pattern shows three Kbd components with Unicode symbols (↵ Enter, ⌫ Delete, ⇥ Tab) plus text labels—lightweight alternative to icon components. Built with shadcn/ui Kbd, it's perfect for minimalist documentation, markdown-based docs, plain text compatibility, email documentation, or any context avoiding JavaScript dependencies while still showing visual key symbols.

Unicode Symbols preview

Scroll to load preview

Installation

Enter with Icon

Lucide icon version

Delete with Icon

Lucide delete icon

Command with Icon

Command icon version

Special Keys

Text-only special keys

Keyboard Shortcut

Standard shortcuts

Typography

Text styling

FAQ

Was this page helpful?

Sign in to leave feedback.

Command with Icon

A React keyboard shortcut displaying Command key with cloverleaf icon using shadcn/ui KbdGroup and Lucide React for Mac shortcut documentation

Required Label

A React form label with red asterisk indicating required field using shadcn/ui Label component for form validation visual cues