Kbd

Formats a keyboard key or shortcut inside instructions and menus.

Preview

Example code

Open searchCtrlK

Playground

Sizesize

Sets the keycap height and text size.

Usage

tsx

import { Kbd } from "earthling-ui/kbd";

export function Example() {
  return (
    <>
      <Kbd size="md">Ctrl</Kbd>
    </>
  );
}

Write keys in the same order people press them and keep separators outside Kbd.
Provide a readable phrase around the shortcut; the visual keycaps are supporting notation.
Use tabular or changing-value styles elsewhere—Kbd is intended for literal key labels.

Installation

Start with the project setup for React and Tailwind CSS 4. Both paths use the same component and theme.

Import package

Own the source

bash

npm install earthling-ui

Use the component import shown above. Package updates keep the implementation current.

API reference

Declarations from the current library build, including inherited primitive props. Playground controls above show selected options; they are not the complete API.

tsx

// Generated by dts-bundle-generator v9.5.1

import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';

export declare const kbdVariants: (props?: ({
	size?: "sm" | "md" | "lg" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export interface KbdProps extends ComponentProps<"kbd">, VariantProps<typeof kbdVariants> {
}
export declare const Kbd: import("react").ForwardRefExoticComponent<Omit<KbdProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

export {};

Runtime dependencies: class-variance-authority, cnfast.

Source

Use the eject command to copy this implementation with its required helpers and project-specific imports.

View Kbd implementation

tsx

"use client";

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

const kbdVariants = cva(
  "inline-flex items-center justify-center rounded-md border border-current/20 bg-muted/50 px-1.5 font-mono font-medium text-muted-foreground shadow-[inset_0_-1px_0_rgb(0_0_0/0.08)] select-none dark:shadow-[inset_0_-1px_0_rgb(255_255_255/0.08)]",
  {
    variants: {
      size: {
        sm: "h-5 min-w-5 text-[10px]",
        md: "h-6 min-w-6 text-xs",
        lg: "h-7 min-w-7 text-sm",
      },
    },
    defaultVariants: { size: "md" },
  },
);

export interface KbdProps
  extends ComponentProps<"kbd">, VariantProps<typeof kbdVariants> {}

const Kbd = forwardRef<HTMLElement, KbdProps>(
  ({ className, size, ...props }, ref) => {
    return (
      <kbd
        ref={ref}
        className={cn(kbdVariants({ size }), className)}
        {...props}
      />
    );
  },
);
Kbd.displayName = "Kbd";

export { Kbd, kbdVariants };