Components
Code block
Code shown inside the product, with a copy button.
webhook payload
{ "event": "renewal.due", "vendor": "notion", "days": 60 }Snippet
curl -X POST https://api.inbox.dev/v1/requests -d @request.jsonInstallation
npx shadcn@latest add https://ui.whoisroktim.lol/r/code-block.jsonNo syntax highlighting, on purpose
This is for code shown in the product — a webhook payload, a command to paste. What matters is the exact characters, not the colours, and highlighting costs a parser and a theme for something nobody reads for pleasure.
The docs site is the opposite case: there, code is the subject, and it uses Shiki.
It scrolls rather than wraps
A wrapped command cannot be copied by eye, and a wrapped URL cannot be read at all. The copy button exists because that is what people actually do with it.
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | — | Exactly as it should be copied. |
| filename | string | "Snippet" | The header label. |