Kbd

Keyboard shortcut hint pill.

Shortcuts

Keyboard hint pills.

Search ⌘KSave ⌘SClose Esc

function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3 text-body-regular text-text-secondary">
      <span className="inline-flex items-center gap-1.5">
        Search <Kbd>⌘K</Kbd>
      </span>
      <span className="inline-flex items-center gap-1.5">
        Save <Kbd>⌘S</Kbd>
      </span>
      <span className="inline-flex items-center gap-1.5">
        Close <Kbd>Esc</Kbd>
      </span>
    </div>
  );
}

function KbdDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3 text-body-regular text-text-secondary">
      <span className="inline-flex items-center gap-1.5">
        Search <Kbd>⌘K</Kbd>
      </span>
      <span className="inline-flex items-center gap-1.5">
        Save <Kbd>⌘S</Kbd>
      </span>
      <span className="inline-flex items-center gap-1.5">
        Close <Kbd>Esc</Kbd>
      </span>
    </div>
  );
}

Installation

npx shadcn@latest add https://boardcn.dev/r/kbd.json

npx shadcn@latest add https://boardcn.dev/r/kbd.json

BoardCN dependencies

The CLI installs these for you — you do not need to add them yourself.

cx utility

Source

The file the CLI copies into your project.

components/base/kbd/kbd.tsx

import type { HTMLAttributes, Ref } from "react";
import { cx } from "@/utils/cx";

export interface KbdProps extends HTMLAttributes<HTMLElement> {
  ref?: Ref<HTMLElement>;
}

export function Kbd({ className, ref, ...props }: KbdProps) {
  return (
    <kbd
      ref={ref}
      className={cx(
        "inline-flex items-center justify-center rounded-full bg-kbd-background px-1 py-0.5 font-sans text-caption-1-semibold tracking-normal whitespace-nowrap text-kbd-foreground",
        className,
      )}
      {...props}
    />
  );
}

import type { HTMLAttributes, Ref } from "react";
import { cx } from "@/utils/cx";

export interface KbdProps extends HTMLAttributes<HTMLElement> {
  ref?: Ref<HTMLElement>;
}

export function Kbd({ className, ref, ...props }: KbdProps) {
  return (
    <kbd
      ref={ref}
      className={cx(
        "inline-flex items-center justify-center rounded-full bg-kbd-background px-1 py-0.5 font-sans text-caption-1-semibold tracking-normal whitespace-nowrap text-kbd-foreground",
        className,
      )}
      {...props}
    />
  );
}