Kbd

Keyboard shortcut display.

stable

Preview

Save⌘S

Code

tsx

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

export function Example() {
  return (
    <div className="flex items-center gap-2 text-sm text-fg-muted">
      <span>Save</span>
      <Kbd>⌘</Kbd>
      <Kbd>S</Kbd>
    </div>
  );
}

Props

Prop	Type	Default	Description
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Renders a `<kbd>` element styled as a keyboard key. Plain children.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/kbd.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type HTMLAttributes, forwardRef } from "react";

export const Kbd = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
  ({ className, ...props }, ref) => (
    <kbd
      ref={ref}
      className={cn(
        "inline-flex items-center rounded border border-border bg-bg-muted px-1.5 py-0.5",
        "font-mono text-xs font-medium text-fg-muted shadow-sm",
        className,
      )}
      {...props}
    />
  ),
);
Kbd.displayName = "Kbd";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmKbd (extends Label). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmKbd;

PrizmKbd()
PrizmKbd(String text)

Keyboard key indicator — monospace key-cap chip, via the .prizm-kbd rules. Mirrors components/ui/kbd.tsx.