8.7k

Kbd

PreviousNext

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B
<script lang='ts' setup>
import { Kbd, KbdGroup } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⌃</Kbd>
    </KbdGroup>

    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>B</Kbd>
    </KbdGroup>
  </div>
</template>

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.

Use Ctrl + BCtrl + K to open the command palette 

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

<template>
  <div class="flex flex-col items-center gap-4">
    <p class="text-muted-foreground text-sm">
      Use
      <KbdGroup>
        <Kbd>Ctrl + B</Kbd>
        <Kbd>Ctrl + K</Kbd>
      </KbdGroup>
      to open the command palette
    </p>
  </div>
</template>

Button

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

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

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Button variant="outline" size="sm" class="pr-2">
      Accept <Kbd>⏎</Kbd>
    </Button>
    <Button variant="outline" size="sm" class="pr-2">
      Cancel <Kbd>Esc</Kbd>
    </Button>
  </div>
</template>

Tooltip

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

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/tooltip'
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <ButtonGroup>
      <Tooltip>
        <TooltipTrigger as-child>
          <Button size="sm" variant="outline">
            Save
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <div class="flex items-center gap-2">
            Save Changes <Kbd>S</Kbd>
          </div>
        </TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger as-child>
          <Button size="sm" variant="outline">
            Print
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <div class="flex items-center gap-2">
            Print Document
            <KbdGroup>
              <Kbd>Ctrl</Kbd>
              <Kbd>P</Kbd>
            </KbdGroup>
          </div>
        </TooltipContent>
      </Tooltip>
    </ButtonGroup>
  </div>
</template>

Input Group

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

⌘K
<script setup lang="ts">
import { SearchIcon } from 'lucide-vue-next'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex w-full max-w-xs flex-col gap-6">
    <InputGroup>
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

API Reference

Kbd

Use the Kbd component to display a keyboard key.

PropTypeDefault
classstring``
<Kbd>
Ctrl
</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

PropTypeDefault
classstring``
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
ItemLabel