Kbd
Kbd displays quiet, native keyboard shortcut notation beside actions and commands.
Overview and decision boundary
Use Kbd to display a keyboard shortcut beside an action or command label.
Do not use Kbd as an interactive control or a replacement for visible command labels.
Esc⌘K⇧⌘P⌥←⌘↵
import { Kbd } from '@nerio-ui/ui';<Kbd>Esc</Kbd><Kbd>⌘K</Kbd><Kbd>⇧⌘P</Kbd><Kbd>⌥←</Kbd><Kbd>⌘↵</Kbd>Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add kbdimport { Kbd } from '@nerio-ui/ui';Usage
import { Kbd } from '@nerio-ui/ui';<Kbd>Esc</Kbd><Kbd>⌘K</Kbd><Kbd>⇧⌘P</Kbd><Kbd>⌥←</Kbd><Kbd>⌘↵</Kbd>Variants
| Variant | Use |
|---|---|
Default | Neutral shortcut notation that adapts through tokens. |
Anatomy
⌘K
| Element | Purpose |
|---|---|
kbd | Native kbd element with quiet shortcut styling. |
States
Esc
| 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.
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 so it supports, rather than competes with, the action label.
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.
Related components
Tokens
| Group | Tokens | Controls |
|---|---|---|
Surface | --n-kbd-background / --n-kbd-border-color | Quiet key surface and boundary. |
Shape | --n-kbd-border-width / --n-kbd-radius | Border weight and corner radius. |
Typography | --n-kbd-foreground / --n-kbd-font-family / --n-kbd-font-size / --n-kbd-font-weight | Shortcut legibility and tone. |
Spacing | --n-kbd-padding-block / --n-kbd-padding-inline | Inner key spacing. |