Kbd

Basic

Displays keyboard keys and shortcuts in a styled, monospaced element with a tactile inset shadow.

<div className="flex items-center gap-1"><Kbd>⌘</Kbd><span>+</span><Kbd>K</Kbd></div><div className="flex items-center gap-1"><Kbd>Ctrl</Kbd><span>+</span><Kbd>S</Kbd></div>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add kbd

pnpm dlx @work-rjkashyap/unified-ui add kbd

npx @work-rjkashyap/unified-ui add kbd

bunx @work-rjkashyap/unified-ui add kbd

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Kbd } from "@work-rjkashyap/unified-ui";

Basic Usage

Wrap any key name or symbol in <Kbd> to render it as a styled keyboard key.

<Kbd>Enter</Kbd>
<Kbd>Escape</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⇧</Kbd>
<Kbd>Tab</Kbd>

Sizes

Three sizes are available. The default is md.

<Kbd size="sm">⌘</Kbd><Kbd size="md">⌘</Kbd><Kbd size="lg">⌘</Kbd>

Key Combinations

Chain multiple Kbd components with a separator to show shortcuts.

{/* Command palette */}<div className="flex items-center gap-1"><Kbd>⌘</Kbd><span>+</span><Kbd>K</Kbd></div>{/* Save file */}<div className="flex items-center gap-1"><Kbd>Ctrl</Kbd><span>+</span><Kbd>S</Kbd></div>{/* Three-key combo */}<div className="flex items-center gap-1"><Kbd>Ctrl</Kbd><span>+</span><Kbd>Shift</Kbd><span>+</span><Kbd>I</Kbd></div>

Inline Usage

Kbd is an inline element — it works naturally inside paragraphs and labels.

<p className="text-sm text-muted-foreground">
  Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd> to open the command palette.
</p>

<p className="text-sm text-muted-foreground">
  Use <Kbd>Tab</Kbd> to move focus between fields and <Kbd>Enter</Kbd> to submit.
</p>

Shortcuts Table

A common pattern is a keyboard shortcuts reference table.

<table><tbody>  <tr>    <td>Command palette</td>    <td>      <Kbd size="sm">⌘</Kbd>      <span>+</span>      <Kbd size="sm">K</Kbd>    </td>  </tr>  <tr>    <td>Save</td>    <td>      <Kbd size="sm">⌘</Kbd>      <span>+</span>      <Kbd size="sm">S</Kbd>    </td>  </tr></tbody></table>

Props

All standard <kbd> HTML attributes are also accepted.

Accessibility

• Renders as a semantic <kbd> HTML element, which screen readers announce as "keyboard input."
• select-none prevents accidental text selection.
• Works with aria-label or surrounding text context for screen reader descriptions.
• For interactive shortcut hints (e.g., in a search bar), wrap the hint in an aria-hidden container and provide a separate screen-reader description.

Design Tokens