Kbd

Data Display

Semantic keyboard-key hints for shortcuts and instructions.

Key combinationsNavigation keysSemantic keyboard markup

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

kbd.tsx

"use client";

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

export default function KbdExample() {
  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between gap-8 rounded-lg border p-4">
        <span className="text-sm">Open command palette</span>
        <span className="flex gap-1" role="img" aria-label="Command plus K">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </span>
      </div>
      <div className="flex flex-wrap gap-2">
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>Enter</Kbd>
        <Kbd>Esc</Kbd>
        <Kbd>↑</Kbd>
        <Kbd>↓</Kbd>
      </div>
      <p className="text-xs text-muted-foreground">
        Shortcut hints are visual documentation; register shortcuts in your
        application.
      </p>
    </div>
  );
}

Usage

Use Kbd for individual keys and combine keys in a visible shortcut hint. This component renders semantic kbd markup only; it does not register or intercept keyboard shortcuts.

Import

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

Shipped as editable source in src/components/ui/kbd.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/kbd.tsx

import type { ComponentProps } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export function Kbd({ className, ...props }: ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        "inline-flex min-h-6 min-w-6 items-center justify-center rounded-md border border-b-2 bg-muted px-1.5 font-mono text-[11px] font-medium text-muted-foreground",
        className,
      )}
      {...props}
    />
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Kbd props
Prop	Type / Default	Description
children	`ReactNode` Default: —	Key name or symbol.
className	`string` Default: —	Extend the keycap style.
...props	`HTML kbd attributes` Default: —	Standard element attributes.

Build with these too

Command Tooltip