Preview
npm install @kapable/remix-kitUsage
CodeBlock usage<CodeBlock code={command} label="Install command" lang="sh" />API
CodeBlock APICodeBlockProps
A code block in the drafting grammar: plain mono on the raised-quiet channel, horizontally scrollable as a keyboard-reachable named group. It deliberately is not a landmark: docs pages often contain many blocks, and dozens of identical regions make landmark navigation worse. Code is plain text by default; callers may pass safe server-rendered token data. Zero JS. Compose a CopyButton beside it in an island when copying matters (the block is position:relative for exactly that overlay).
| prop | type | notes |
|---|---|---|
| code | string | The code, verbatim. |
| tokens? | CodeToken[] | Optional server-rendered tokens. Falls back to `code` if their text differs. |
| lang? | string | Language hint exposed as a data attribute. |
| label? | string | Accessible name for the scroll region. Default 'Code'. |
| dense? | boolean | Tighter padding + smaller type for dense listings. |
| mix? | MixInput |