Inline keyboard glyph for shortcuts in copy, menus, and docs. Renders a native <kbd> so assistive tech treats it as a key.
Press
Press <ply-kbd>⌘</ply-kbd> <ply-kbd>K</ply-kbd> to open the palette.
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add kbd
// Paths are relative to aliases.components (default: src/app/components)
import { KbdComponent } from './kbd/kbd.component';
@Component({
selector: 'app-kbd-example',
imports: [
KbdComponent
],
template: `...`
})
export class KbdExampleComponent {}Install
npx ply-ui-cli add kbd
Run the following command to add this component to your project:
npx ply-ui-cli add kbd
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 | Member | Type | Default | Description |
|---|---|---|---|---|
ply-kbd | — | — | — | Inline keyboard glyph for shortcuts in copy, menus, and docs. |
ply-kbd | class | string | '' | Extra host classes merged via `cn()`. |
Content