Components

Code Block

Code with a copy button; bring your own highlighter for colours. The copy button runs on useCopyToClipboard, which you can use for copy buttons anywhere.

import { Button } from '@rinzai/zen';

export default function Save() {
    return <Button loading>Saving…</Button>;
}

Import

import { CodeBlock, useCopyToClipboard } from '@rinzai/zen';

Examples

Plain

Without a highlighter, the code shows as plain text.

pnpm add @rinzai/zen

In card

Inside a card or panel that already has a surface, variant="plain" drops the block's own.

Install

pnpm add @rinzai/zen

Copy button

A copy button of your own, with the hook CodeBlock copies with: copy resolves false when the browser won't copy, and here the link is then selected to copy by hand.

API reference

<CodeBlock>

Code on a glass panel whose edge catches the pointer light, with a copy button. Give it a max height (className) and the code scrolls inside. Zen ships no highlighter: pass highlight (code → HTML string, e.g. sugar-high's highlight) for colours.

Prop	Type	Default
`code`Required	`string`	`—`
`copyable` Show the copy button (on hover and focus).	`boolean`	`true`
`highlight` Turns the code into HTML with coloured tokens. Without it, plain text.	`((code: string, language?: string) => string)`	`—`
`language` Passed to `highlight`, and set as data-language.	`string`	`—`
`variant` `glass` (default): its own lit glass panel. `plain`: no surface, for code inside a card or panel.	`"glass" \| "plain"`	`glass`