For code that documents itself rather than runs: install commands, config, imports. A copy button fades in on hover or keyboard focus and confirms with a tick. An optional label renders a filename or language caption across the top. The copy uses the async Clipboard API and fails silently where it is unavailable; the button labels are props, so no language is baked in.
Ejemplos
With a caption
An optional label names the file or language.
Terminal
npm install numori-ui<UiCodeBlock label="Terminal" code="npm install numori-ui" />Bare
Without a label, just the snippet and a copy button on hover.
import { UiButton } from 'numori-ui'<UiCodeBlock code="import { UiButton } from 'numori-ui'" />Props
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| codeobligatorio | string | — | The snippet text. |
| label | string | '' | Optional filename/language caption shown above the block. |
| copyLabel | string | 'Copy' | Label for the copy button at rest. |
| copiedLabel | string | 'Copied' | Label shown briefly after a successful copy. |