React Multi-Language Code Tabs

Copy Page

A developer landing on your page is asking one question: does this work in my stack? Showing the same operation in four languages answers it in about two seconds — faster than any paragraph you could write.

from kelvin import Device

dev = Device.open("/dev/klv0")
key = dev.keys.load(slot=3)

ct = dev.aes_gcm.encrypt(
    key=key,
    nonce=os.urandom(12),
    plaintext=b"telemetry frame",
    aad=b"v1",
)
print(ct.tag.hex())

Installation

Props

The install line renders as its own shell row above the code, because the install command is almost always the first thing a reader actually needs and it does not belong buried in a comment.

Keep the samples equivalent

The whole value of this component is the implied promise that these are the same operation. Break that — a Python sample that handles errors and a C sample that does not, a CLI example against a different endpoint — and an attentive reader will notice and trust the rest of the page less.

Write one sample, then translate it. Keep the variable names identical across languages. If an operation genuinely cannot be expressed in one of your SDKs, leave that tab out rather than faking it.

This component intentionally renders plain, unhighlighted monospace. Syntax highlighting for four grammars costs more bundle than a marketing page should spend; for a real docs page, use Code Block instead, which highlights via Shiki at build time.