Kbd

A component for displaying keyboard keys and shortcuts.

Single keys:

K⌘⌃⇧

Key combinations:

⌘K⌘ShiftPCtrlAltDelete

import { Kbd, KbdGroup } from "@/components/ui/kbd";

export default function Particle() {
  return (
    <div className="flex flex-col gap-4">
      <div>
        <p className="mb-2 text-muted-foreground text-sm">Single keys:</p>
        <div className="flex gap-2">
          <Kbd>K</Kbd>
          <Kbd>⌘</Kbd>
          <Kbd>⌃</Kbd>
          <Kbd>⇧</Kbd>
        </div>
      </div>
      <div>
        <p className="mb-2 text-muted-foreground text-sm">Key combinations:</p>
        <div className="flex gap-2">
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Shift</Kbd>
            <Kbd>P</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <Kbd>Alt</Kbd>
            <Kbd>Delete</Kbd>
          </KbdGroup>
        </div>
      </div>
    </div>
  );
}

Installation


pnpm dlx cnippet@latest add kbd

Usage

import { Kbd, KbdGroup } from "@/components/ui/kbd"

Single key:

<Kbd>K</Kbd>

Multiple keys (key combination):

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

API Reference

Kbd

Displays a single keyboard key.

Prop	Type	Default
`className`	`string`

<Kbd>⌘K</Kbd>

KbdGroup

Groups multiple keyboard keys for key combinations.

Prop	Type	Default
`className`	`string`

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

Badge Progress

On This Page

Installation Usage API Reference Kbd KbdGroup