Primitives

Kbd

Keys drawn as keys; combinations read out with “+”.

Search ⌘+KSwitch app ⌘+⇧+KOpen a gate GSmall Alt+1

kbd.tsx

"use client";

import { Kbd } from "@waveinno/ui";

export default function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-x-8 gap-y-4 text-[13px] text-body">
      <span className="flex items-center gap-2">
        Search <Kbd keys={["⌘", "K"]} />
      </span>
      <span className="flex items-center gap-2">
        Switch app <Kbd keys={["⌘", "⇧", "K"]} />
      </span>
      <span className="flex items-center gap-2">
        Open a gate <Kbd>G</Kbd>
      </span>
      <span className="flex items-center gap-2">
        Small <Kbd size="sm" keys={["Alt", "1"]} />
      </span>
    </div>
  );
}

Import#

Everything comes from the package root. The example above uses:

your-component.tsx

import { Kbd } from "@waveinno/ui";

Props#

Read from the source of this version, so they match the code exactly.

<Kbd>

src/components/ui/kbd.tsx

Prop	Type	Default	Description
`keys`	`string[]`	—	A combination: ["⌘", "K"].
`size`	`"sm" \| "md"`	`"md"`
`className`	`string`	—
`children`	`React.ReactNode`	—

Install#

If the project does not have the package yet, add it, then follow the setup for Next.js or Vite once.

$ npm install @waveinno/ui