Componentnavigation

Kbd

Keycap indicator with raised bottom border for shortcuts.

Preview

Live Preview

⌘Kto searchEscto cancel

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add kbd

Or install the full npm package:

npm install bigbullui

Usage

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

<Kbd>⌘</Kbd> + <Kbd>K</Kbd>

Source code

kbd.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
  children?: React.ReactNode;
  className?: string;
}

export function Kbd({ children, className, ...props }: KbdProps) {
  return (
    <kbd
      className={cn(
        "inline-flex items-center justify-center rounded-sm border border-border border-b-2 border-b-foreground/30 bg-secondary px-1.5 py-0.5 font-mono text-[11px] font-semibold text-secondary-foreground shadow-xs",
        className
      )}
      {...props}
    >
      {children}
    </kbd>
  );
}

Props

Prop	Type	Description
children	React.ReactNode	Keycap label or symbol.