Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add kbdKbd
Display keyboard keys and shortcuts in a visually consistent way. Useful for documentation, tooltips, command palettes, and UI hints showing keyboard shortcuts.
Installation
Add the component files
Create the component directory structure and add the following files to your project.
kbd.component.tsimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
import type { ClassValue } from 'clsx';
import { kbdVariants } from './kbd.variants';
import { mergeClasses } from '@/shared/utils/merge-classes';
@Component({
selector: 'z-kbd, [z-kbd]',
standalone: true,
template: `
<kbd><ng-content /></kbd>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'classes()',
},
exportAs: 'zKbd',
})
export class ZardKbdComponent {
readonly class = input<ClassValue>('');
protected readonly classes = computed(() => mergeClasses(kbdVariants(), this.class()));
}
kbd.variants.tsimport { cva } from 'class-variance-authority';
export const kbdVariants = cva(
`min-w-5 w-fit h-5 inline-flex items-center justify-center gap-1 text-xs font-medium font-mono bg-muted text-muted-foreground pointer-events-none rounded-sm px-1 select-none [&_svg:not([class*='size-'])]:size-3 [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10`,
);
export const kbdGroupVariants = cva(`inline-flex items-center gap-1`);
export * from './kbd.component';
export * from './kbd-group.component';
export * from './kbd.variants';
import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
import { type ClassValue } from 'clsx';
import { kbdGroupVariants } from './kbd.variants';
import { mergeClasses } from '@/shared/utils/merge-classes';
@Component({
selector: 'z-kbd-group, [z-kbd-group]',
standalone: true,
template: `
<ng-content />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
'[class]': 'classes()',
},
exportAs: 'zKbdGroup',
})
export class ZardKbdGroupComponent {
readonly class = input<ClassValue>('');
protected readonly classes = computed(() => mergeClasses(kbdGroupVariants(), this.class()));
}