Componentnavigation0.35 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use Kbd when a ticket stub surface needs Keycap indicator with raised bottom border for shortcuts. Keep props minimal and prefer composition with sibling stubs.

Avoid Kbd for long form flows or dense data grids where a dedicated layout block fits better.

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
className?	string