Shadcn.io is not affiliated with official shadcn/ui
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
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.
Disabled State preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
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
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