Kbd | Arbol UI

Language

Appearance

In a sentence

Press J and K to move between conversations, and Esc to close the panel.

import { Kbd } from '@arbol-ai/ui';

<p className="text-muted-foreground text-sm">
  Press <Kbd>J</Kbd> and <Kbd>K</Kbd> to move between conversations, and <Kbd>Esc</Kbd> to close the
  panel.
</p>

A combination

KbdGroup draws each key of a combination separately.

Send the replyCtrlEnter

import { Kbd, KbdGroup } from '@arbol-ai/ui';

<div className="flex items-center gap-3 text-sm">
  Send the reply
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>Enter</Kbd>
  </KbdGroup>
</div>

Source

The examples above are src/components/kbd/kbd.examples.tsx, which the library’s tests render too.