Kbd

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download kbd -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Kbd } from "@/components/ui/kbd";
import * as UI from "@/components/ui/kbd";

const Component = UI.Kbd;

const args = {
  "children": "⌘ K",
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Kbd>{{ args.children }}</Kbd>
</template>

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

• KbdGroup

Examples

Default

<script setup lang="ts">
import { Kbd } from "@/components/ui/kbd";
import * as UI from "@/components/ui/kbd";

const Component = UI.Kbd;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Kbd>⌘</Kbd>
</template>

Combo

<script setup lang="ts">
import { KbdGroup } from "@/components/ui/kbd";
import { Kbd } from "@/components/ui/kbd";
import * as UI from "@/components/ui/kbd";

const Component = UI.Kbd;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>
</template>

Inline

<script setup lang="ts">
import { KbdGroup } from "@/components/ui/kbd";
import { Kbd } from "@/components/ui/kbd";
import * as UI from "@/components/ui/kbd";

const Component = UI.Kbd;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <p class="text-sm text-neutral-mid">
    Press <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> to open the command
    menu.
  </p>
</template>

In Button

<script setup lang="ts">
import { Button } from "@/components/ui/button";
import { KbdGroup } from "@/components/ui/kbd";
import { Kbd } from "@/components/ui/kbd";
import * as UI from "@/components/ui/kbd";

const Component = UI.Kbd;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Button variant="tertiary" size="sm"
    >Search<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup></Button
  >
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Kbd

KbdGroup

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.