Kbd([text('K')])

Kbd([text('Xsmall')], style: [Kbd.xs]),
Kbd([text('Small')], style: [Kbd.sm]),
Kbd([text('Medium')], style: [Kbd.md]), // Default
Kbd([text('Large')], style: [Kbd.lg]),
Kbd([text('Xlarge')], style: [Kbd.xl]),

span([
  text('Press '),
  Kbd([text('F')], style: [Kbd.sm]),
  text(' to pay respects.'),
])

Kbd([text('ctrl')]),
text('+'),
Kbd([text('shift')]),
text('+'),
Kbd([text('del')]),

Kbd([text('⌘')]),
Kbd([text('⌥')]),
Kbd([text('⇧')]),
Kbd([text('⌃')]),

// Helper list of keys
final row1 = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'];
final row2 = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'];
final row3 = ['z', 'x', 'c', 'v', 'b', 'n', 'm', '/'];

div(classes: 'overflow-x-auto', [
  Container(
    row1.map((key) => Kbd([text(key)])).toList(),
    style: [Layout.flex, Alignment.justifyCenter, Layout.gap1, Spacing.mb(1)],
  ),
  Container(
    row2.map((key) => Kbd([text(key)])).toList(),
    style: [Layout.flex, Alignment.justifyCenter, Layout.gap1, Spacing.mb(1)],
  ),
  Container(
    row3.map((key) => Kbd([text(key)])).toList(),
    style: [Layout.flex, Alignment.justifyCenter, Layout.gap1, Spacing.mb(1)],
  ),
])

// Use a nested flexbox structure to create the cross layout.
Container(
  [
    // Up arrow
    Kbd([text('▲')]),
    // Middle row for left and right arrows
    Container(
      [
        Kbd([text('◀︎')]),
        Kbd([text('▶︎')]),
      ],
      style: [Layout.flex, Layout.gap12],
    ),
    // Down arrow
    Kbd([text('▼')]),
  ],
  // Main container: lays out the three rows vertically and centers them
  style: [Layout.flex, Layout.flexCol, Alignment.itemsCenter, Layout.gap1],
)