Skip to content
EMBOSS
Docs menu

Kbd

A machined keycap for keyboard shortcuts — a semantic kbd element with a raised, lit-from-above profile.

@emboss/kbd

Press ⌘ K to search, or Esc to close.

Installation

pnpm dlx shadcn@latest add @emboss/kbd

Usage

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

export function Example() {
  return (
    <p>
      Save with <Kbd>⌘</Kbd> <Kbd>S</Kbd>
    </p>
  );
}

API reference

Kbd

Extends the native kbd element.

PropTypeDefaultDescription
childrenReactNode—The key legend, e.g. ⌘ or Esc.

Source

View source — kbd.tsx
kbd.tsx
import { cn } from "@/lib/utils";

/**
 * A machined keycap for displaying keyboard shortcuts. Renders a semantic
 * `<kbd>` element with a raised, lit-from-above profile.
 *
 * @example
 * <p>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search.</p>
 */
function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "inline-flex h-5 min-w-5 items-center justify-center rounded-xs bg-surface-2 px-1.5 font-mono text-[0.6875rem] font-medium text-ink-muted shadow-emboss-1 select-none",
        className,
      )}
      {...props}
    />
  );
}

export { Kbd };

Related

ButtonA momentary push button that rests embossed, depresses to flush while held, and springs back with a machined overshoot.