Kbd

Key caps for shortcuts, single or grouped.

Open command palette: ⌘K
Promote to production: ⌘⇧P
Go to deployments: GD

Installation

npx shadcn@latest add https://ui-collections.vercel.app/r/glass/kbd.json

Also installs the theme, cn(). Packages: clsx, tailwind-merge.

Usage

kbd-demo.tsx

import { Kbd, KbdGroup } from "@/registry/kit/ui/kbd";

const shortcuts = [
  { keys: ["⌘", "K"], label: "Open command palette" },
  { keys: ["⌘", "⇧", "P"], label: "Promote to production" },
  { keys: ["G", "D"], label: "Go to deployments" },
];

export default function KbdDemo() {
  return (
    <dl className="surface grid w-full max-w-sm gap-1 rounded-card p-3">
      {shortcuts.map((s) => (
        <div key={s.label} className="flex items-center justify-between rounded-field px-3 py-2.5 text-sm">
          <dt className="text-fg/85">{s.label}</dt>
          <dd>
            <KbdGroup keys={s.keys} />
          </dd>
        </div>
      ))}
      <p className="px-3 pt-2 pb-1 text-xs text-muted">
        Press <Kbd>?</Kbd> anywhere to see all shortcuts.
      </p>
    </dl>
  );
}

API

<KbdGroup keys>

string[]

Keys pressed together.

Source

components/ui/kbd.tsx

import type { HTMLAttributes } from "react";

import { cn } from "@/registry/kit/lib/utils";

/** A single key cap. */
export function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>) {
  return (
    <kbd
      className={cn(
        "inline-flex h-6 min-w-6 items-center justify-center rounded-[calc(var(--r-field)*0.4)] border border-fg/15 bg-fg/[0.06] px-1.5",
        "font-mono text-[11px] text-fg/80 shadow-[inset_0_-1px_0_var(--c-line)]",
        className,
      )}
      {...props}
    />
  );
}

/** Keys pressed together, e.g. ⌘ K. */
export function KbdGroup({ keys, className }: { keys: string[]; className?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-1", className)}>
      {keys.map((key) => (
        <Kbd key={key}>{key}</Kbd>
      ))}
    </span>
  );
}

Usage

kbd-demo.tsx

import { Kbd, KbdGroup } from "@/registry/kit/ui/kbd";

const shortcuts = [
  { keys: ["⌘", "K"], label: "Open command palette" },
  { keys: ["⌘", "⇧", "P"], label: "Promote to production" },
  { keys: ["G", "D"], label: "Go to deployments" },
];

export default function KbdDemo() {
  return (
    <dl className="surface grid w-full max-w-sm gap-1 rounded-card p-3">
      {shortcuts.map((s) => (
        <div key={s.label} className="flex items-center justify-between rounded-field px-3 py-2.5 text-sm">
          <dt className="text-fg/85">{s.label}</dt>
          <dd>
            <KbdGroup keys={s.keys} />
          </dd>
        </div>
      ))}
      <p className="px-3 pt-2 pb-1 text-xs text-muted">
        Press <Kbd>?</Kbd> anywhere to see all shortcuts.
      </p>
    </dl>
  );
}

Source

components/ui/kbd.tsx

import type { HTMLAttributes } from "react";

import { cn } from "@/registry/kit/lib/utils";

/** A single key cap. */
export function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>) {
  return (
    <kbd
      className={cn(
        "inline-flex h-6 min-w-6 items-center justify-center rounded-[calc(var(--r-field)*0.4)] border border-fg/15 bg-fg/[0.06] px-1.5",
        "font-mono text-[11px] text-fg/80 shadow-[inset_0_-1px_0_var(--c-line)]",
        className,
      )}
      {...props}
    />
  );
}

/** Keys pressed together, e.g. ⌘ K. */
export function KbdGroup({ keys, className }: { keys: string[]; className?: string }) {
  return (
    <span className={cn("inline-flex items-center gap-1", className)}>
      {keys.map((key) => (
        <Kbd key={key}>{key}</Kbd>
      ))}
    </span>
  );
}