Folio

Components

Keyboard Input

Used to display textual user input from the keyboard. Use it for shortcut hints and key references -- not for general inline code.

Toolkit API. Kbd and KbdGroup match @distylai/toolkit-ui, built on the semantic <kbd> element. Inside a tooltip, a key cap switches to a translucent surface automatically.

Preview

⌘K

Rendered with live Folio tokens -- the muted surface and text remap on theme change, no dark: classes.

Examples

⇧⌘P
Single keys
Ctrl+BCombo

Press Esc to close

In a sentence

A single key uses Kbd; a sequence wraps them in KbdGroup for even spacing. Each key is at least square (min-w-5) so K and Esc sit consistently.

API

Part
Description
Kbd
A single key cap -- wrap a key name or symbol (⌘, Shift, Enter).
KbdGroup
Groups multiple Kbd keys into one shortcut, with consistent spacing.

Don't and Do

Don't

Don't use Kbd for inline code, file names, or values -- that's a <code>. Reserve it for actual keystrokes.

Do
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
import { Kbd, KbdGroup } from "@/components/shadcn/kbd";

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

Drop-in ready. Renders a real <kbd> element, so it's semantic and screen-reader friendly.

API matches @distylai/toolkit-ui. Built on the semantic <kbd> element with the muted surface mapped to the Folio background-secondary token.