Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Large Kbd
Large Kbd components with h-8 height and text-base font size for prominent keyboard shortcut display built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Prominent shortcuts deserve emphasis—hero sections, tutorials, feature highlights need visible keyboard indicators. This React pattern uses Kbd components with h-8 (32px) height, min-w-8 width, px-2 padding, and text-base (16px) font creating large keyboard indicators. Built with shadcn/ui Kbd component and Tailwind utility classes, it's perfect for landing page heroes, tutorial overlays, onboarding flows, feature announcements, marketing pages, or any context where keyboard shortcuts shown prominently drawing attention creating visual hierarchy and emphasis on important commands.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Default Kbd
Standard size keyboard indicators
Small Kbd
Compact keyboard indicators
Extra Large Kbd
Extra large keyboard indicators
Inline with Text
Kbd inline with paragraph text
Keyboard Shortcuts
Multi-key shortcut combinations
Mac Command Symbol
Mac Command key with ⌘ symbol