Shadcn.io is not affiliated with official shadcn/ui
Small Kbd
Small Kbd components with h-4 height and text-[10px] font size for compact keyboard shortcut display built with shadcn/ui
Space-constrained UIs need compact shortcuts—tooltips, sidebars, status bars can't fit default-sized keys. This React pattern uses Kbd components with custom h-4 height, min-w-4 width, and text-[10px] font size creating tiny keyboard indicators. Built with shadcn/ui Kbd component and Tailwind utility classes, it's perfect for compact tooltips, dense sidebar navigation, crowded status bars, mobile interfaces, or any space-limited context where minimal keyboard shortcut hints must fit without overwhelming layout or reducing information density.
Small Kbd preview
Installation
Related Components
Default Kbd
Standard size keyboard indicators
Large Kbd
Larger keyboard indicators
Inline with Text
Kbd inline with paragraph text
Extra Large Kbd
Extra large keyboard indicators
Keyboard Shortcuts
Multi-key shortcut combinations
Mac Command Symbol
Mac Command key with ⌘ symbol
FAQ
Was this page helpful?
Sign in to leave feedback.