Kbd

Kbd renders a keyboard hint as crisp key caps — single keys, multi-key chords, and sequences — with platform-aware modifiers and a spoken name for every glyph.

Single key

Pass one key id to keys and Kbd draws a single cap. Named keys resolve to a glyph or abbreviation and an announced name — Enter shows ↵, Esc reads "Escape", ArrowUp shows ↑ — and a lone letter shows uppercase but is spoken lowercase.

import { Kbd } from "@stridge/noctis";

export default function KbdSingleKey() {
    return (
        <div className="flex flex-wrap items-center gap-3">
            <Kbd keys="K" />
            <Kbd keys="Enter" />
            <Kbd keys="Esc" />
            <Kbd keys="ArrowUp" />
        </div>
    );
}

Chord

Join keys pressed together with +. Mod is platform-aware — ⌘ on Apple, Ctrl elsewhere — so one keys="Mod+K" reads correctly everywhere; each cap stays distinct so the chord never runs together.

import { Kbd } from "@stridge/noctis";

export default function KbdChord() {
    return (
        <div className="flex flex-wrap items-center gap-3">
            <Kbd keys="Mod+K" />
            <Kbd keys="Mod+Shift+P" />
            <Kbd keys="Shift+Enter" />
        </div>
    );
}

Within prose

Kbd sizes in em, so a hint sits proportionally inside running text and tracks the surrounding font size. Drop one inline to name a shortcut mid-sentence.

import { Kbd } from "@stridge/noctis";

export default function KbdWithinProse() {
    return (
        <p className="max-w-prose text-muted">
            Press <Kbd keys="Mod+K" /> to open the command palette, then type a command and confirm with <Kbd keys="Enter" />. To
            dismiss it, press <Kbd keys="Esc" />.
        </p>
    );
}

On surfaces

The same control re-tuned across the elevation scopes — the root canvas, an elevated panel, a menu, and a sunken well. It stays legible on every layer.

Design tokens

Generated from the component's declaration — the same graph that mints the CSS, so a variable name or its resolution default can't drift. The minted tokens are the public override seam: set one on any ancestor and every Kbd in that region retunes — e.g. .dense { --noctis-kbd-key-height: 1.25em; } shrinks every key cap beneath it. Knobs that aren't minted are reached through the part's data-slot. See Customization for the full override ladder and Tokens for the whole graph.

API reference

Generated from the component's types — every prop, type, default, and description comes straight from the source. Kbd takes a single keys string in its own compact syntax — + joins a chord, whitespace separates a sequence; expand a row for the full type and description.