Kbd

Playground

'use client';
import { Kbd, KbdGroup } from '@mbsw/ui';

export default function Demo() {
  return (
    <div style={{ transform: 'scale(1.5)' }}>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </div>
  );
}

Usage

Use Kbd for a key name and KbdGroup for a key combination. Kbd keeps a minimum size of 16×16px and grows to fit longer names. Your app implements the shortcut.

'use client';
import { Kbd, KbdGroup } from '@mbsw/ui';

export default function Example() {
  return (
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

KbdKbdGroup