Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Small Kbd
Small Kbd components with h-4 height and text-[10px] font size for compact keyboard shortcut display built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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