Neutral shortcut notation that adapts through tokens.
Anatomy
Element
Purpose
kbd
Native kbd element with secondary text and an adaptive alpha-neutral surface.
States
State
Behavior
Default
Static supplementary notation with no interactive state.
Motion
Kbd is static and does not animate.
Accessibility
Renders the native kbd element so shortcut notation retains semantic meaning.
Use Kbd as supplemental shortcut notation, not as the only way to discover a command.
When Kbd is displayed inside a named control, hide it from assistive technology to avoid repeating the action name.
Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.
API
Prop
Type
Purpose
children
ReactNode
Shortcut notation such as ⌘S, ⇧⌘P, or Esc.
className
string
Extends the root while preserving tokenized defaults.
HTML attributes
HTMLAttributes<HTMLElement>
Passes native kbd attributes through.
Implementation contract
Contract
Value
Registry item
kbd installs 3 source files into the configured components directory.
Base UI
No interactive primitive required.
Registry dependencies
None.
Package dependencies
clsx, react
Styling contract
Contract
Value
Authoring
Complete, statically detectable Tailwind CSS v4 recipes own component visuals.
Values
Semantic and component --n-* variables remain the canonical customization layer.
Overrides
Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.
Residual CSS
Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.
Design notes
Keep shortcut notation quiet with secondary text and an alpha-neutral surface that adapts to its background.
Do / do not
Do
Use beside familiar commands when a keyboard shortcut is available.
Do not
Use Kbd as an interactive control or a replacement for visible command labels.
