Kbd

Inline keyboard glyph for shortcuts in copy, menus, and docs. Renders a native <kbd> so assistive tech treats it as a key.

freenew

Shortcuts

Press ⌘K to open the command palette, or CtrlS to save. Dismiss dialogs with Esc.

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add kbd

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add kbd
// Paths are relative to aliases.components (default: src/app/components)
import { KbdComponent } from './kbd/kbd.component';

@Component({
  selector: 'app-your-component',
  imports: [
    KbdComponent
  ],
  template: `...`
})
export class YourComponent {}

API for kbd — generated from JSDoc in the library source.

API reference for kbd
API	Member	Type	Default	Description
`base-kbd`	`—`	`—`	—	Inline keyboard glyph for shortcuts in copy, menus, and docs.
`base-kbd`	`class`	`string`	`''`	Extra host classes merged via `cn()`.