Kbd

Display keyboard input or hotkey.

Source: GitHub
Issues: Report

Press ⌘+C to copy.

Kbd example

import { Kbd } from "@/shim-ui/kbd";

export default () => (
  <p>
    Press <Kbd>⌘+C</Kbd> to copy.
  </p>
);

Install

Use the CLI or copy the source code manually.

Command

Source code

pnpm dlx @kkga/shim add kbd

Variant

Use the variant prop to set the appearance of the kbd.

Ctrl+CCtrl+C

Variant example

import { Kbd } from "@/shim-ui/kbd";

export default () => (
  <>
    <Kbd variant="surface">Ctrl+C</Kbd>
    <Kbd variant="plain">Ctrl+C</Kbd>
  </>
);

Size

Use the size prop to adjust the size of the keyboard input.

Ctrl+CCtrl+CCtrl+C

Size example

import { Kbd } from "@/shim-ui/kbd";

export default () => (
  <>
    <Kbd size={1}>Ctrl+C</Kbd>
    <Kbd size={2}>Ctrl+C</Kbd>
    <Kbd size={3}>Ctrl+C</Kbd>
  </>
);