Is the ai2 Kbd compatible with shadcn/ui?

Yes. It is a single-element component in the same style as shadcn/ui primitives and installs through the standard shadcn registry format, so it drops into any shadcn/ui project without changes.

Is the Kbd component accessible?

It renders the native kbd HTML element, which is the semantic tag for keyboard input, so screen readers read the key text as regular content. There is no radix primitive and no ARIA involved because none is needed: it is presentational text, not an interactive control.

How do I install the ai2 Kbd?

Run npx shadcn add @ai2/kbd with the ai2 registry configured in components.json. It has no npm dependencies; the @ai2/tokens theme installs alongside it. An MCP agent can run the same install, or you can copy the source manually.

Can an AI agent install and use this component?

Yes. The registry item ships agent-readable metadata and a working example, and the page provides a copy prompt. Point the shadcn MCP server at the @ai2 registry and the agent can search, inspect and install it on its own.

Does Kbd actually register keyboard shortcuts?

No. It is a visual hint only, deliberately inert with pointer-events disabled. Register the real shortcut with a keydown listener or a command palette library; use Kbd to show users what to press.

How do I display a shortcut chord like Ctrl+K?

Render one Kbd per key and join them with a plus sign or a small flex gap: Ctrl + K . The same pattern works for three-key chords like Cmd Shift P.

Can I change the size or color of the key caps?

Yes. Kbd accepts className, so you can override the height, font size, background or border with Tailwind classes. The defaults are sized to sit inline with body text.

Why is the Kbd not clickable?

The component sets pointer-events-none and select-none on purpose. A key hint that looked clickable but did nothing would be misleading, so it is inert; put the real action on a Button or a shortcut handler.

Kbd

A keyboard key hint in the mono font on the surface tokens. Combine several for shortcut chords.

display

A free styled version is available

Press Ctrl + K to open the command palette.

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

export default function KbdDemo() {
  return (
    <p className="flex items-center gap-1 text-sm text-muted-foreground">
      Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open the command palette.
    </p>
  )
}

Installation

Run the following command

npx shadcn@latest add @ai2/kbd

The @ai2/tokens theme and the component file are installed together.

Add the cn util

lib/utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

/* Adds a source-attribution ref param to a URL (the inspiration exports mark their
   outbound links with an ai2.design attribution). An invalid URL is returned as is.

   This file is SHOWN TO THE CONSUMER: the docs component pages render the source of
   `cn` in a code block, so a Turkish comment here would reach every one of those
   pages. Keep it English. */
export function withRef(url: string, ref = "ai2.design"): string {
  try {
    const u = new URL(url)
    u.searchParams.set("ref", ref)
    return u.toString()
  } catch {
    return url
  }
}

Copy the source code

components/ui/kbd.tsx

import type * as React from "react"

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-[0.3rem] border border-border bg-surface-2 px-1.5 font-mono text-[0.7rem] font-medium text-muted-foreground shadow-[0_1px_0_1px_var(--border)] [&_svg]:size-3 [&_svg]:shrink-0 [&_i]:text-xs [&_i]:leading-none",
        className
      )}
      {...props}
    />
  )
}

export { Kbd }

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the surface colors will be missing.

Usage

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

<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>

Render one Kbd per key and combine them for chords. The element is pointer-events-none by design: it is a hint, not a button.

Examples

Key combinations

Ctrl + K

⌘ Shift P

Esc

Inline in text

Press / to focus the search field, use ↑ ↓ to move through results and Enter to open one.

Props

Kbd has no props of its own. It accepts every native <kbd> prop, and className for size or color overrides.

ai2 Kbd: keyboard shortcut hints for React, styled by tokens

The ai2 Kbd is a shadcn-compatible keyboard key component for React, styled with Tailwind CSS v4 on the shared ai2 tokens. It renders a single key cap in the mono font on the surface tokens, with a subtle keyboard-like shadow, and you compose several of them into shortcut chords like Ctrl+K / Cmd+K in menus, tooltips, command palettes and onboarding copy.

Because it ships through the shadcn registry format, you install it with one CLI command, an MCP agent, or a copy-paste, and the source lands in your own project. You own the file; there is no runtime dependency on ai2 itself. The live example above is the exact component you get.

What is the ai2 Kbd?

It is a single part: one Kbd component that renders the native <kbd> HTML element with key-cap styling: mono font, surface-2 background, a border and a one-pixel bottom shadow that reads as a physical key. There is no radix primitive and no JavaScript behavior; it is a purely presentational element.

By design it is pointer-events-none and select-none: a Kbd is a hint about a shortcut, not a button that triggers it. The minimum square size keeps single characters like K or / as tidy caps, while longer labels like Ctrl, Shift and Esc grow naturally with padding.

Why use it

Semantic HTML by default: It renders the native kbd element, the HTML tag defined for user keyboard input, so the markup says what the content is without any ARIA bolted on.
Reads as a real key: Mono font, bordered cap and a bottom shadow built from the border token give it a physical keyboard look in both light and dark mode.
Not a fake button: pointer-events-none and select-none make it inert: users cannot click or accidentally select a hint, so it never competes with the real shortcut handler.
Composes into chords: One Kbd per key, joined with + or a small gap, expresses any shortcut: Ctrl+K, Cmd+Shift+P, or a bare Esc.
Agent-readable metadata: The registry item describes the intended use in plain words, so an MCP agent can find, inspect and install it without guessing.

Features

shadcn registry install: One command adds the component and the @ai2/tokens theme to your project. Kbd has no npm dependencies of its own.
Native kbd element: The semantic HTML element for keyboard input, so screen readers and search engines see meaningful markup, not a styled span.
Token-driven surface: Background comes from surface-2 and the shadow from the border token, so the cap follows your theme automatically.
Square minimum size: A height of 5 with a matching min-width keeps single-character keys square while multi-character keys grow with padding.
Data attribute for styling: The element exposes data-slot="kbd", so you can retheme every key hint from CSS without forking the component.
TypeScript source: The installed file is typed and forwards every native kbd prop, including className for size or color overrides.

Production tips

One Kbd per key: Render Ctrl+K as two Kbd elements joined by a plus sign, not one element containing "Ctrl+K". Each cap should map to one physical key.
Match the visitor's platform: If you show modifier keys, detect the platform and swap Ctrl for Cmd on macOS so the hint matches the shortcut users actually press.
The hint is not the handler: Kbd is inert on purpose. Register the actual shortcut with a keydown listener or your command palette; the component only documents it.
Keep hints next to their action: Put the Kbd chord inline with the menu item, tooltip or empty state that describes the action, so users learn shortcuts in context.
Scale with className when needed: The default cap is sized for body text. In heroes or large empty states, raise the height and font size via className instead of nesting transforms.

Works with the rest of ai2

Kbd shines next to command surfaces. Show the Ctrl+K / Cmd+K chord that opens your ai2 Command palette, annotate items in a ai2 Dropdown Menu with their shortcuts, or pair a hint with an ai2 Tooltip on icon-only buttons.

It also fits documentation and onboarding: inline key hints in help text, shortcut tables built with Table, or a dismiss hint next to a Dialog. One token source keeps the caps consistent with the rest of your UI in both modes.

Kbd