Kbd

since 1.2

Kbd is a component for displaying keyboard shortcuts and key combinations in your interface.

Example

Save:S

Copy:C

Paste:V

"use client"

import { Kbd, KbdGroup } from "@strongtie/design-system/kbd"
import { Command } from "lucide-react"

export function KbdDefault() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="text-sm">Save:</span>
        <KbdGroup>
          <Kbd>
            <Command className="size-3" />
          </Kbd>
          <Kbd>S</Kbd>
        </KbdGroup>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Copy:</span>
        <KbdGroup>
          <Kbd>
            <Command className="size-3" />
          </Kbd>
          <Kbd>C</Kbd>
        </KbdGroup>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm">Paste:</span>
        <KbdGroup>
          <Kbd>
            <Command className="size-3" />
          </Kbd>
          <Kbd>V</Kbd>
        </KbdGroup>
      </div>
    </div>
  )
}

Install

import { Kbd } from "@strongtie/design-system/kbd"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

Kbd
KbdGroup

Props

All components accept standard HTML attributes and React props.

Item Label

On This Page

Example Install Components Props

Kbd