Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Default Kbd
Default size Kbd components without custom sizing for standard keyboard shortcut display built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Most keyboard shortcut documentation needs balanced readable size—not cramped, not oversized. This React pattern uses Kbd components at default size without custom classes for standard keyboard indicators. Built with shadcn/ui Kbd component using theme defaults, it's perfect for primary documentation pages, tutorial content, help sections, settings displays, or any general context where keyboard shortcuts shown at comfortable reading size matching surrounding text creating consistent professional documentation appearance.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Small Kbd
Compact 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