Components

Kbd

Keyboard key or shortcut chip, like “⌘K” next to Search. `Shortcut` is the plain text variant used at the end of menu rows.

Press ⌘K to search

Usage

Use it to:

  • show the shortcut of an action next to it, in tooltips, menus and help text

Don’t use it to:

  • as a button (it is not interactive)
  • for tags or statuses (use Tag / Badge)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/KbdExample.tsx
import { Kbd } from '@krackedui/motion';

export function SearchHint() {
  return (
    <p>
      Press <Kbd>⌘K</Kbd> to search
    </p>
  );
}

Examples

Keys

⌘⇧EnterEsc⌘⇧L

Menu shortcut

Copy link⌘⌥L

Dark theme

⌘K⌘⌥L

API Reference

Kbd

A <kbd> element; supports all of its props.

PropTypeDefault
className
string

Shortcut

A <span> with tertiary 12px text; supports all of its props.

PropTypeDefault
className
string

Accessibility

  • Static text in a <kbd> element; screen readers read the characters. Spell out keys that symbols may not convey (e.g. aria-label="Command K") where it matters.
© 2026 Motion. Internal documentation.