Kbd – React component · Siteplane UI

Esc⌘KCtrlShiftP

"use client";

import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Kbd>Esc</Kbd>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  );
}

Installation

pnpm dlx shadcn@4.18.0 add @siteplane/kbd

Complete the one-time setup first. Registry JSON lists source files and dependencies.

For this page’s examples, also install:

pnpm dlx shadcn@4.18.0 add @siteplane/button @siteplane/input-group

Usage

import { Kbd } from "@/siteplane/components/kbd";

<Kbd>Esc</Kbd>;

Composition

KbdGroup
├── Kbd
└── Kbd

In text

Use KbdGroup for keys that are pressed together, for example in a hint sentence. The application must implement any shortcut it displays.

Press ⌘K to open the command menu.

"use client";

import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <p className="text-muted-foreground text-sm">
      Press{" "}
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>{" "}
      to open the command menu.
    </p>
  );
}

Input group

Show the shortcut that focuses a field in an input group addon.

⌘K

"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/siteplane/components/input-group";
import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupAddon>
        <SearchIcon aria-hidden="true" />
      </InputGroupAddon>
      <InputGroupInput
        aria-label="Search projects"
        placeholder="Search projects…"
        type="search"
      />
      <InputGroupAddon align="inline-end">
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </InputGroupAddon>
    </InputGroup>
  );
}

Button

Add a shortcut hint after a button label; it becomes part of the button's accessible name.

"use client";

import { PrinterIcon } from "lucide-react";
import { Button } from "@/siteplane/components/button";
import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <Button variant="outline">
      <PrinterIcon aria-hidden="true" />
      Print
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </Button>
  );
}

Kbd and KbdGroup both render native kbd elements and accept their attributes, refs, children and string className. Kbd supplies the small muted key surface; KbdGroup supplies horizontal spacing without a key surface. There are no owned props or behavior defaults beyond this presentation. See HTML kbd.

Read the installed source.

Usage notes

Choose shortcut labels for the user’s platform. Do not make a displayed shortcut the only way to discover or invoke an action.