On this page

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@latest

Includes @ninna-ui/core. CSS setup required.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.

Live preview/ Default

⌘CtrlShiftEnter

Sizes

Different size variants for keyboard keys.

Live preview/ Default

xs:Ctrl

sm:Ctrl

md:Ctrl

lg:Ctrl

Colors

Different color variants for keyboard keys.

Live preview/ Default

neutralprimarysecondaryaccentinfosuccesswarningdanger

Use Cases

Real-world examples of Kbd component usage.

Live preview/ Default

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