@cf/kbd

Kbd

A keycap for showing a keyboard shortcut, usually inside a tooltip or beside a menu row.

Press⌘Kto search, or Esc to close.

Inside a tooltip the key switches to bg-background/20 so it still reads against the dark popup.

A <kbd> with data-slot="kbd". Inside a tooltip the ground is the foreground colour, so the key lifts off it with bg-background/20 instead of the usual bg-foreground/10, and the tooltip tightens its own right padding when it contains one.

Following the site's mobile rule, I remove shortcut hints below md rather than finding a touch equivalent. The notes sidebar wraps its keys in hidden md:flex, and the sidebar toggle only shows its [ inside a tooltip.

import { Kbd } from "@/components/ui/kbd";
 
<TooltipContent side="right">
  Hide the sidebar
  <Kbd>[</Kbd>
</TooltipContent>

Rules

The same rules ship in DESIGN.md and the MCP server, for the agents building with this.

must
Hide Kbd below md (wrap it in hidden md:flex, or show it only inside a TooltipContent, which touch never opens); don't adapt it for touch.
A keycap hint is a keyboard-and-pointer affordance, and on a phone it's noise.
hide-below-md
should
Put aria-keyshortcuts on the control the shortcut triggers; Kbd is visual only.
declare-the-shortcut
should
Render one Kbd per key for chords, rather than one Kbd holding ⌘K.
one-key-per-cap
should
Leave Kbd's background alone inside TooltipContent; it switches to bg-background/20 there by itself.
no-background-override-in-tooltips

Install

bunx shadcn@latest add @cf/kbd

Needs the @cf registry in your components.json once. The theme and any sibling components come along automatically.

Source

kbd.tsxShow

import { cn } from "cn";
import type { ComponentProps } from "react";
 
/**
 * A key as it's printed on a keyboard. Carries `data-slot="kbd"`, which is
 * what the tooltip popup styles against when a shortcut sits inside one.
 */
function Kbd({ className, ...props }: ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        "inline-flex min-w-5 items-center justify-center rounded-sm bg-foreground/10 px-1 py-0.5 font-mono text-[0.6875rem] leading-none",
        // Inside a tooltip the ground is the foreground colour, so the key
        // has to lift off that instead.
        "in-data-[slot=tooltip-content]:bg-background/20",
        className
      )}
      data-slot="kbd"
      {...props}
    />
  );
}
 
export { Kbd };