Primitive

Code

Mono code block and inline code treatment.

Code should remain compact and inspectable. Use blocks for excerpts and InlineCode only for short identifiers inside prose.
typography
DOM renderImage render
CodeDefault
ConcretePressure
TypeScript
const state = concreteRegistry.find(item => item.slug === "transcript-item")

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

TypeScript code block with inline code.
ConcretePressure
TypeScript
const state = concreteRegistry.find(item => item.slug === "transcript-item")
Render state

Typescript

Multi-line TypeScript with line numbers.
TypeScript
const queue = migrationQueue.next()
const result = await catalogAudit.run(queue.routes)
return result.status
Render state

Html

HTML tokenizer hint.
HTML
<button class="concrete-button">Run</button>
Render state

Command

Compact command with internal clipboard copy.
Shell
npm install @rubriclab/concrete
Render state

Inline

Inline code in prose rhythm.
Use ConcretePressure to document composition mode.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
code *string-CodeBlock source text.
mode'block' | 'command'blockBlock excerpt or compact command treatment.
languagestringTypeScriptHeader label and syntax tokenizer hint.
showLineNumbersboolean-Renders the numeric gutter. Defaults on for block mode.
copyablebooleantrueRenders the internal clipboard copy action.
copyValuestring-Overrides copied text while leaving visible code unchanged.
copyLabelReactNodeCopyCopy button label.
copiedLabelReactNodeCopiedTransient successful copy label.
copyErrorLabelReactNodeFailedTransient failed copy label.
childrenReactNode-InlineCode text content.