CodeBlock

Stripe Code

Monospace text on a muted surface with a Copy button that confirms with a toast. json pretty-prints a value or a JSON string; secret starts masked (••••a1b2) with Show/Hide while Copy still copies the real value. Long lines scroll unless you ask them to wrap.

pnpm add @zikzuk/ui

import { CodeBlock, prettyJson, maskSecret } from "@zikzuk/ui";

A JSON payload

json

1{2  "event": "payment.success",3  "data": {4    "id": "pay_8f2k1x",5    "amount": 125000,6    "currency": "INR"7  }8}

A secret shown once

Copy your API key now

You won't see it again after you leave this page.

••••••••••••a1b2

When to use

Webhook bodies and API payloads.
An API key shown once — inside a warning Banner, never a toast.

Props

Prop	Type	Description
content	string	The text.
json	unknown	A value or JSON string to pretty-print; wins over content.
language	string	A small label: json, bash.
lineNumbers	boolean Default `false`	Number the lines.
wrap	boolean Default `false`	Wrap long lines instead of scrolling.
copyable	boolean Default `true`	Show the Copy button.
copyLabel	string	Names it in the toast: “API key copied”.
secret	boolean Default `false`	Masked, with Show/Hide.
maxHeight	string	Scroll vertically past this height.
className	string	Extra classes on the outer element.