Kbd
Represents keyboard input or keyboard shortcuts in documentation.
⌃⌘⌥J
Automatic Installation
This method is still working on progress, please use manual installation for now.
Manual Installation
Install dependencies
npm install radix-ui
Copy the code
import * as React from 'react'
import { type KbdStyles, kbdStyles } from './kbd.css'
type KbdKey =
| 'command'
| 'shift'
| 'ctrl'
| 'option'
| 'enter'
| 'delete'
| 'escape'
| 'tab'
| 'capslock'
| 'up'
| 'right'
| 'down'
| 'left'
| 'pageup'
| 'pagedown'
| 'home'
| 'end'
| 'help'
| 'space'
const kbdKeysMap: Record<KbdKey, string> = {
command: '⌘',
shift: '⇧',
ctrl: '⌃',
option: '⌥',
enter: '↵',
delete: '⌫',
escape: '⎋',
tab: '⇥',
capslock: '⇪',
up: '↑',
right: '→',
down: '↓',
left: '←',
pageup: '⇞',
pagedown: '⇟',
home: '↖',
end: '↘',
help: '?',
space: '␣',
}
const kbdKeysLabelMap: Record<KbdKey, string> = {
command: 'Command',
shift: 'Shift',
ctrl: 'Control',
option: 'Option',
enter: 'Enter',
delete: 'Delete',
escape: 'Escape',
tab: 'Tab',
capslock: 'Caps Lock',
up: 'Up',
right: 'Right',
down: 'Down',
left: 'Left',
pageup: 'Page Up',
pagedown: 'Page Down',
home: 'Home',
end: 'End',
help: 'Help',
space: 'Space',
}
interface KbdProps
extends Omit<React.HTMLAttributes<React.ComponentRef<'kbd'>>, 'size'>,
KbdStyles {
keys?: KbdKey | KbdKey[]
}
const Key = ({ keyName }: { keyName: KbdKey }) => {
const isKey = typeof keyName === 'string' && keyName in kbdKeysMap
return !isKey ? null : <abbr title={kbdKeysLabelMap[keyName]}>{kbdKeysMap[keyName]}</abbr>
}
const Kbd = React.forwardRef<React.ComponentRef<'kbd'>, KbdProps>(
({ children, className, keys, size = 'xs', ...otherProps }, forwardedRef) => {
const renderKeys = () => {
if (!keys) return null
if (Array.isArray(keys)) {
return keys.map((k) => <Key key={k} keyName={k} />)
}
return <Key keyName={keys} />
}
if ((!keys || keys.length === 0) && !children) return null
return (
<kbd ref={forwardedRef} className={kbdStyles({ size, className })} {...otherProps}>
{renderKeys()}
{children ? <span>{children}</span> : null}
</kbd>
)
}
)
Kbd.displayName = 'Kbd'
export { Kbd, type KbdProps }
Usage
Imports
import { Kbd } from '#/components/kbd'
Example
Browse the Storybook for more examples.
Credits
This component is based on Wedges Kbd by LemonSqueezy, licensed under MIT License.
Edit on GitHub
Last updated on 3/24/2025