Kbd

Kbd renders keyboard key caps and KbdGroup composes multi-key shortcuts.

When to use

  • Show keyboard shortcuts in command menus and tooltips.
  • Document discoverable actions in docs or settings screens.
  • Keep key labels visually consistent across the app.

Behavior notes

  • Kbd renders semantic <kbd> with token-based styling.
  • KbdGroup aligns multiple keys in one inline sequence.
  • Works well inside tooltip content via built-in contextual styles.

Example

<KbdGroup>
  <Kbd>Cmd</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Preview

Press keyboard shortcuts:

Search
⌘K
Toggle sidebar
⌘B
Open command palette
⌥⇧P

Usage

import { Kbd, KbdGroup } from '@branditdev/ui';

export function KbdDemo() {
  return (
    <div className='flex flex-col gap-4'>
      <p className='text-sm'>Press keyboard shortcuts:</p>

      <div className='flex flex-wrap items-center gap-4 text-sm'>
        <span className='text-muted-foreground'>Search</span>
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </div>

      <div className='flex flex-wrap items-center gap-4 text-sm'>
        <span className='text-muted-foreground'>Toggle sidebar</span>
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>B</Kbd>
        </KbdGroup>
      </div>

      <div className='flex flex-wrap items-center gap-4 text-sm'>
        <span className='text-muted-foreground'>Open command palette</span>
        <KbdGroup>
          <Kbd>⌥</Kbd>
          <Kbd>⇧</Kbd>
          <Kbd>P</Kbd>
        </KbdGroup>
      </div>
    </div>
  );
}

API

Kbd(__namedParameters): Element

Defined in: components/kbd/kbd.tsx:14

Displays a styled keyboard key hint.

Parameters

NameTypeOptionalDefaultDescription
__namedParametersDetailedHTMLPropsno--

Returns

Element

Source

import type * as React from 'react';

import { cn } from '@branditdev/ui';

export type KbdProps = React.ComponentProps<'kbd'>;

export type KbdGroupProps = React.ComponentProps<'div'>;

function Kbd({ className, ...props }: KbdProps) {
  return (
    <kbd
      data-slot='kbd'
      className={cn(
        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
        "[&_svg:not([class*='size-'])]:size-3",
        'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10',
        className
      )}
      {...props}
    />
  );
}

function KbdGroup({ className, ...props }: KbdGroupProps) {
  return (
    <div
      data-slot='kbd-group'
      className={cn('inline-flex items-center gap-1', className)}
      {...props}
    />
  );
}

export { Kbd, KbdGroup };
InputLabel