⌘⇧⌥⌃Ctrl+B

Installation

pnpm dlx shadcn-vue@latest add kbd

Usage

<script setup lang="ts">
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <Kbd>Ctrl</Kbd>
</template>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

⌘⇧⌥⌃Ctrl+B

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

⌘K

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
class	string	``

<Kbd>
Ctrl
</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
class	string	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>