Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Landing pages and presentations need maximum impact—tiny shortcuts won't cut it for hero banners. This React pattern uses Kbd components with h-12 (48px) height, min-w-12 width, px-3 padding, and text-2xl (24px) font creating extra large keyboard indicators. Built with shadcn/ui Kbd component and Tailwind utility classes, it's perfect for landing page heroes, product showcase banners, conference presentation slides, marketing materials, promotional graphics, or any maximum-visibility context where keyboard shortcuts displayed as primary visual element demanding immediate attention commanding prominent screen real estate.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Large Kbd
Larger keyboard indicators
Default Kbd
Standard size keyboard indicators
Small Kbd
Compact keyboard indicators
Inline with Text
Kbd inline with paragraph text
Keyboard Shortcuts
Multi-key shortcut combinations
Mac Command Symbol
Mac Command key with ⌘ symbol
Questions you might have
React kbd - Inline with Text
Kbd components embedded inline with paragraph text matching font size for natural reading flow built with shadcn/ui
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