Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Disabled State
A React keyboard key showing disabled state with opacity-50 and cursor-not-allowed using shadcn/ui Kbd component to indicate unavailable shortcuts
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not all shortcuts are always available. This React pattern shows Kbd in disabled state using opacity-50 and cursor-not-allowed classes—visually communicates when keyboard shortcuts are unavailable in current context. Built with shadcn/ui Kbd component, it's perfect for contextual help displaying inactive shortcuts, keyboard reference showing disabled commands, adaptive UIs indicating unavailable features, or documentation teaching when shortcuts won't work.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Active State
Highlighted pressed key
Hover State
Hover effects on keys
Keyboard Shortcut
Standard shortcut display
Disabled Button
Button disabled state
Disabled Input
Input disabled state
Tooltip with Kbd
Shortcut with explanation
Questions you might have
React kbd - Active State
A React keyboard shortcut showing active/pressed key state with bg-primary styling using shadcn/ui Kbd component to indicate currently pressed keys
React kbd - Focus State
A React keyboard key showing focus state with ring-2 ring-ring ring-offset-2 using shadcn/ui Kbd component for keyboard-navigable shortcuts