Kbd

Typography

Utility

Display keyboard shortcuts with platform-specific symbols, visual styling, and automatic key rendering.

Preview

Keyboard shortcuts with automatic symbol rendering

Single key:

Key combination:+⇧+p

Multiple keys:Ctrl++Del

Common Shortcuts

Frequently used keyboard shortcuts

Save+s

Copy+c

Paste+v

Undo+z

Redo+⇧+z

Find+f

Arrow & Special Keys

Special keys automatically render with icons or symbols

Move up

Move down

Move left

Move right

Confirm

CancelEsc

Next field⇥

Delete

Sizes

Three size options: sm, md, and lg

Small

+k

Medium

+k

Large

+k

Variants

Context-aware styles for different backgrounds

Default (indigo tint)

Use on white backgrounds like inputs, cards, dialogs

+f

onColor (white)

Use on gray or colored backgrounds like headers, toolbars

+f

In Context

Keyboard shortcuts displayed in documentation and UI hints

Press +k to open the command palette.

Use ⇥ and ⇧+⇥ to navigate between fields.

Press Esc to close this dialog or to confirm.

Navigate with arrow keys:

Supported Key Names

All supported key names for the component

Modifiers

cmd
ctrl
alt / option
shift

Arrows

up
down
left
right

Special

enter
esc / escape
tab
backspace
delete
space

Props

Kbd component API reference

Prop	Type	Default	Description
`keys`	`string[]`	—	Array of key names for combinations
`children`	`string`	—	Single key name (alternative to keys)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant
`variant`	`'default' \| 'onColor'`	`'default'`	Visual style: default (indigo on white bg) or onColor (white on gray/colored bg)
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { Kbd } from '@/components/ui/kbd'

export default function Example() {
  return (
    <>
      {/* Single key */}
      <Kbd>Enter</Kbd>

      {/* Key combination */}
      <Kbd keys={['cmd', 'k']} />

      {/* Multiple modifiers */}
      <Kbd keys={['cmd', 'shift', 'p']} />

      {/* In white input/card - use default variant (indigo tint) */}
      <div className="bg-white p-4">
        <p>Press <Kbd keys={['cmd', 's']} /> to save</p>
      </div>

      {/* In gray/colored container - use onColor variant (white) */}
      <div className="bg-slate-100 p-4">
        <p>Press <Kbd keys={['cmd', 's']} variant="onColor" /> to save</p>
      </div>

      {/* Size variants */}
      <Kbd keys={['cmd', 'k']} size="sm" />
      <Kbd keys={['cmd', 'k']} size="md" />
      <Kbd keys={['cmd', 'k']} size="lg" />

      {/* Arrow keys */}
      <Kbd>up</Kbd>
      <Kbd>down</Kbd>
      <Kbd>left</Kbd>
      <Kbd>right</Kbd>

      {/* Special keys */}
      <Kbd>enter</Kbd>
      <Kbd>esc</Kbd>
      <Kbd>tab</Kbd>
      <Kbd>backspace</Kbd>
    </>
  )
}

Features

Built-in functionality

Platform symbols: ⌘ for Cmd, ⌥ for Alt, ⇧ for Shift, etc.
Auto icon rendering: Arrow keys, Enter, Escape get icon treatment
Key combinations: Support for multi-key shortcuts with + separator
Three sizes: Small, medium, and large options
Context-aware variants: Indigo tint on white, white on colored backgrounds
Flat design: No shadows or borders for modern, clean look
Inline usage: Works seamlessly within text content
Semantic HTML: Uses native <kbd> element for accessibility
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic <kbd> HTML elementScreen readers announce keyboard shortcutsSymbols have text alternatives

Keyboard Navigation

Key	Action
`N/A`	Component is informational only

Notes

The <kbd> element is recognized by assistive technology
Modifier symbols are supplemented with full names in aria-label
Works correctly with high contrast modes

Related Components

Button Tooltip Searchbar