A keyboard key, or a chord of them: ⌘ K, Ctrl Shift P.
Import it from rei-kit:
import { BaseKbd } from 'rei-kit'
Open BaseKbd in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseKbd } from 'rei-kit'
</script>
<template>
<p>Press <BaseKbd :keys="['⌘', 'K']" joiner="+" /> to search.</p>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
keys | string | readonly string[] | yes | One key, or the keys of a chord: `['⌘', 'K']`. |
joiner | string | '' | Drawn between the keys — "+", "then". Empty, they simply sit apart. |
size | 'sm' | 'md' | 'md' |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.