---
title: "Kbd"
description: "Display keyboard shortcuts and key combinations with proper styling."
canonical_url: "https://ui.nuxt.com/docs/typography/kbd"
last_updated: "2026-05-07"
---
# Kbd

> Display keyboard shortcuts and key combinations with proper styling.

## Usage

Use the `kbd` component to display a [Kbd](/docs/components/kbd) in your content.

```vue
<template>
  <p>
  <kbd value=meta />
   
  <kbd value=K /></p>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=:kbd{value="meta"} :kbd{value="K"}
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  :</span>
  <span class=swJcz>
  kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  meta</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }</span>
  <span class=sTEyZ>
   :kbd</span>
  <span class=sMK4o>
  {</span>
  <span class=spNyl>
  value</span>
  <span class=sMK4o>
  =</span>
  <span class=sMK4o>
  "</span>
  <span class=sfazB>
  K</span>
  <span class=sMK4o>
  "</span>
  <span class=sMK4o>
  }
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseKbd component
 */
interface ProseKbdProps {
  /**
   * The element or component this component should render as.
   * @default "\"kbd\""
   */
  as?: any;
  value?: string | undefined;
  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" | undefined;
  variant?: "outline" | "soft" | "subtle" | "solid" | undefined;
  size?: "sm" | "md" | "lg" | undefined;
  ui?: { base?: any; } | undefined;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      kbd: {
        base: 'align-text-top'
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Kbd.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/kbd.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.