Shadcn.io is not affiliated with official shadcn/ui
Large Kbd
Large Kbd components with h-8 height and text-base font size for prominent keyboard shortcut display built with shadcn/ui
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.
Large Kbd preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.