Kbd Component

Keyboard key styling for shortcuts (e.g. Ctrl+K). Matches shadcn-svelte Kbd.

Kbd

Styled <kbd> for showing keyboard shortcuts. Uses design tokens for background, border, and mono font.

Add this component

The command below includes <strong>Kbd</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

Props

  • class (string, optional) - Additional CSS classes

Example

Live Example

Press Ctrl + K to open search. On Mac use ⌘ + K .

Usage

Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.

Astro Vanilla Svelte Vue React