Kbd

Typography

Keyboard key indicator badge.

Preview

Press⌘Kto open command palette, orCtrlShiftP

Usage

example.jsx

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

export default function Example() {
  return <Kbd />;
}

Source Code

Copy this file into components/ui/kbd.jsx in your project.

kbd.jsx

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

const Kbd = forwardRef(({ className, ...props }, ref) => (
  <kbd ref={ref} className={cn("pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground", className)} {...props} />
));
Kbd.displayName = "Kbd";

export { Kbd };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge