Kbd

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

The Kbd component provides a semantic and visually consistent way to represent keyboard keys and shortcuts in documentation, tooltips, menu items, or instructional text. It uses the native <kbd> HTML element with enhanced styling that matches your design system.

Common use cases include command palettes, keyboard shortcut guides, form field hints, and tooltips that explain keyboard interactions. Use Kbd components to improve discoverability of keyboard shortcuts, making your application more accessible to power users and those who prefer keyboard navigation.

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>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Kbd
KbdGroup

Props

All components accept standard HTML attributes and React props.

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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

kbd

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Item Label

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute

Kbd

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>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

Kbd
KbdGroup

Props

All components accept standard HTML attributes and React props.

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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

kbd

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Item Label

On This Page

Example Installation Components Props Example Styling Classes Accessibility

Contribute