Components

Code Block

Code with a copy button; bring your own highlighter for colours.

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

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

Import

import { CodeBlock } 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

API reference

<CodeBlock>

Code on a glass panel whose edge catches the pointer light, with a copy button. 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`