// Plaaayground v2 — Kbd
// Blueprint: 05 — Keyboard shortcut display chip

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const kbdVariants = cva(
  "inline-flex items-center justify-center rounded-md border bg-muted font-mono text-muted-foreground shadow-[0_1px_0_1px_hsl(var(--border))]",
  {
    variants: {
      size: {
        sm: "px-1 py-0.5 text-[10px] min-w-[18px] h-5",
        default: "px-1.5 py-0.5 text-xs min-w-[22px] h-6",
      },
    },
    defaultVariants: {
      size: "default",
    },
  }
);

export interface KbdProps
  extends React.HTMLAttributes<HTMLElement>,
    VariantProps<typeof kbdVariants> {}

export function Kbd({ size, className, children, ...props }: KbdProps) {
  return (
    <kbd className={cn(kbdVariants({ size }), className)} {...props}>
      {children}
    </kbd>
  );
}
Kbd

Preview
