Kbd
Display keyboard shortcuts and key combinations
Usage
import { Kbd } from '@hareui/vue'⌘ K ⇧ P ⌃ C ⌥ D
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="flex items-center gap-4"> <Kbd keys="command"> K </Kbd> <Kbd keys="shift"> P </Kbd> <Kbd keys="ctrl"> C </Kbd> <Kbd keys="option"> D </Kbd> </div></template>Anatomy
<template>
<!-- keys render as abbr symbols (title = key name); the default slot is the content -->
<Kbd :keys="['command']">
K
</Kbd>
</template>ui key | Element | Description |
|---|---|---|
base | <kbd> | The key container |
abbr | <abbr> | One per entry in keys, e.g. ⌘ with title="Command" (HeroUI's Kbd.Abbr) |
content | <span> | Wraps the default slot (HeroUI's Kbd.Content) |
Examples
Variants
Copy:⌘C⌘C
Paste:⌘V⌘V
Cut:⌘X⌘X
Undo:⌘Z⌘Z
Redo:⌘⇧Z⌘⇧Z
<script setup lang="ts">import { Kbd } from '@hareui/vue'const rows = [ { label: 'Copy:', keys: ['command'], key: 'C' }, { label: 'Paste:', keys: ['command'], key: 'V' }, { label: 'Cut:', keys: ['command'], key: 'X' }, { label: 'Undo:', keys: ['command'], key: 'Z' }, { label: 'Redo:', keys: ['command', 'shift'], key: 'Z' },] as const</script><template> <div class="flex flex-col gap-4"> <div v-for="row in rows" :key="row.label" class="flex items-center gap-2"> <span>{{ row.label }}</span> <Kbd :keys="[...row.keys]"> {{ row.key }} </Kbd> <Kbd variant="light" :keys="[...row.keys]"> {{ row.key }} </Kbd> </div> </div></template>Navigation Keys
Arrow Keys:
↑↓←→
Page Navigation:
⇞⇟↖↘
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="flex flex-col gap-4"> <div class="flex items-center gap-2"> <span class="text-sm text-muted">Arrow Keys:</span> <div class="flex items-center gap-2"> <Kbd keys="up" /> <Kbd keys="down" /> <Kbd keys="left" /> <Kbd keys="right" /> </div> </div> <div class="flex items-center gap-2"> <span class="text-sm text-muted">Page Navigation:</span> <div class="flex items-center gap-2"> <Kbd keys="pageup" /> <Kbd keys="pagedown" /> <Kbd keys="home" /> <Kbd keys="end" /> </div> </div> </div></template>Inline Usage
Press Esc to close the dialog.
Use ⌘K to open the command palette.
Navigate with ↑ and ↓ arrow keys.
Save your work with ⌘S regularly.
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="space-y-4"> <p class="text-sm"> Press <Kbd>Esc</Kbd> to close the dialog. </p> <p class="text-sm"> Use <Kbd keys="command">K</Kbd> to open the command palette. </p> <p class="text-sm"> Navigate with <Kbd keys="up" /> and <Kbd keys="down" /> arrow keys. </p> <p class="text-sm"> Save your work with <Kbd keys="command">S</Kbd> regularly. </p> </div></template>Instructional Text
Quick Actions
- • Open search: ⌘K
- • Toggle sidebar: ⌘B
- • New file: ⌘N
- • Quick save: ⌘S
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="space-y-3"> <div class="rounded-lg bg-surface p-4"> <h4 class="mb-2 text-sm font-semibold"> Quick Actions </h4> <ul class="space-y-2 text-sm"> <li>• Open search: <Kbd keys="command">K</Kbd></li> <li>• Toggle sidebar: <Kbd keys="command">B</Kbd></li> <li>• New file: <Kbd keys="command">N</Kbd></li> <li>• Quick save: <Kbd keys="command">S</Kbd></li> </ul> </div> </div></template>Special Keys
Press ↵ to confirm or ⎋ to cancel.
Use ⇥ to navigate between form fields and ⇧⇥ to go back.
Hold ␣ to temporarily enable panning mode.
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="space-y-3"> <p class="text-sm"> Press <Kbd keys="enter" /> to confirm or <Kbd keys="escape" /> to cancel. </p> <p class="text-sm"> Use <Kbd keys="tab" /> to navigate between form fields and <Kbd :keys="['shift', 'tab']" /> to go back. </p> <p class="text-sm"> Hold <Kbd keys="space" /> to temporarily enable panning mode. </p> </div></template>Customization
Tailwind CSS
⌘ K ⇧ P
<script setup lang="ts">import { Kbd } from '@hareui/vue'</script><template> <div class="flex items-center gap-3"> <Kbd class="rounded-lg bg-accent-soft px-2.5 text-accent-soft-foreground" keys="command"> K </Kbd> <Kbd class="rounded-lg bg-default px-2.5 text-muted" keys="shift"> P </Kbd> </div></template>Global theme override
Override the kbd theme app-wide with createHareUI:
app.use(createHareUI({
ui: {
kbd: {
slots: {
base: 'bg-gray-100 dark:bg-gray-800',
abbr: 'font-bold',
content: 'text-sm',
},
},
},
}))Styling Reference
HeroUI's Kbd renders no data-slot attributes; style it through class, ui or createHareUI.
base– keyboard key styles with background and spacing (variant="light"makes the background transparent)abbr– abbreviation element for modifier keyscontent– content wrapper for key text
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | AsTag | Component | "kbd" | The element or component to render as. |
keys | KbdKey | KbdKey[] | - | Modifier or special keys rendered as symbols before the content (HeroUI's Kbd.Abbr keyValue), each with its name as title. |
variant | "default" | "light" | - | Visual variant. |
ui | ComponentSlots<{ slots: { base: string; abbr: string; content: string; }; variants: { variant: { default: string; light: { base: string; }; }; }; }> | - | Per-slot class overrides. |
Slots
| Slot | Props | Description |
|---|---|---|
default | any | The key text after the symbols, wrapped in the content element (HeroUI's Kbd.Content). |
KbdKey
Available values for keys, with the symbol and title each renders. kbdKeysMap and kbdKeysLabelMap are exported.
| Key | Symbol | Title |
|---|---|---|
command | ⌘ | Command |
shift | ⇧ | Shift |
ctrl | ⌃ | Control |
option | ⌥ | Option |
enter | ↵ | Enter |
delete | ⌫ | Delete |
escape | ⎋ | Escape |
tab | ⇥ | Tab |
capslock | ⇪ | Caps Lock |
up | ↑ | Up |
right | → | Right |
down | ↓ | Down |
left | ← | Left |
pageup | ⇞ | Page Up |
pagedown | ⇟ | Page Down |
home | ↖ | Home |
end | ↘ | End |
help | ? | Help |
space | ␣ | Space |
fn | Fn | Fn |
win | ⌘ | Win |
alt | ⌥ | Alt |
