Shim

Kbd

Display keyboard input or hotkey.

Source
GitHub
Issues
Report
Install
pnpm dlx @kkga/shim add kbd

Press ⌘+C to copy.

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.

pnpm dlx @kkga/shim add kbd

Variant

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

Ctrl+CCtrl+C
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
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>
  </>
);