Kbd

Kbd component is used to display keyboard keys, shortcuts, and key combinations. It provides visual styling that mimics physical keyboard keys.

import { Kbd } from "@ninna-ui/primitives"

pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Kbd component to display keyboard keys.

import { Kbd } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <div className="flex items-center gap-1">
      <Kbd>⌘</Kbd>
      <span>+</span>
      <Kbd>C</Kbd>
    </div>
  );
}

Basic

Default keyboard key rendering.

⌘CtrlShiftEnter

Sizes

Different size variants for keyboard keys.

xs:Ctrl

sm:Ctrl

md:Ctrl

lg:Ctrl

Colors

Different color variants for keyboard keys.

neutralprimarysecondaryaccentinfosuccesswarningdanger

Use Cases

Real-world examples of Kbd component usage.

Keyboard Shortcuts

Copy

⌘+C

Paste

⌘+V

Save

⌘+S

Undo

⌘+Z

Inline Usage

Press Enter to submit the form or Esc to cancel.

Navigation Keys

↑↓←→Arrow keys for navigation

Special Keys

TabCaps LockBackspaceDeleteSpace

API Reference

Complete list of props for the Kbd component.

Props

Prop	Type	Default	Description
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'neutral'`	Color variant
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Size variant
`className`	`string`	-	Additional CSS classes

Accessibility

Semantic HTML: Uses native kbd element for proper semantics
Screen readers: Content is read as keyboard key indicator
Visual distinction: Clear visual styling differentiates from regular text