Shadcn.io is not affiliated with official shadcn/ui
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
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.
Extra Large Kbd preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.