ui · 6 variants · 1 categories

Code Block

Formatted code with optional filename, line numbers, copy, diff, and editorial quote rendering.

npx "@rueda.dev/gems-diamond" add code-block

§01

Display

6 variants

app.tsx

import { Button } from '@diamond/ui'; export default function App() { return <Button>Click</Button>; }

dark

terminalbash

$ npm i @diamond/ui ✓ installed 42 packages $ diamond init

terminal

01const app = {

02 name: 'diamond',

03 version: '3.2.1',

04}

numbered

diff · atlas.ts

-version: '3.1.0'

+version: '3.2.0'

diff

◉ Output2.3 KB · GZIP

◆ Diamond build complete\n → dist/bundle.js (2.3 KB)\n⚡ ready in 428ms

output

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

— SAINT-EXUPÉRY

quote

Usage Guide

How to wire up this component in your app — props, callbacks, customization, and the conventions Diamond shares across the library.

Code source

code — plain string. Required for numbered (line splitting) and terminal / output rendering.
children — custom rendered JSX (e.g. highlighted by Shiki). Wins over code.
diff — array of { kind: 'add' | 'remove' | 'context', content } for the diff variant.

Copy to clipboard

Set copyable to render a Copy button in the header. Default behavior writes code to navigator.clipboard. Override with onCopy for custom serialization.

Universal patterns

Every Diamond component shares the same prop conventions, so once you learn one you can predict the others.

variant — discriminated union of every visual option. Categories shown above are docs-only metadata; the prop is a flat string union.
accent — any CSS color string. Overrides --diamond-accent just for that instance via inline style. Cascades into hover, ring, and selection states.
asChild (when present) — renders the underlying primitive via @radix-ui/react-slot, letting you compose with <Link>, motion.button, etc.
className — merged with internal Tailwind classes via cn(). Use it to override layout, spacing, or colors.
Native HTML attributes (onClick, aria-*, data-*, ref, etc.) flow through to the root element without any whitelist.
Diamond is the skin: zero domain state, zero fetch, zero providers. You wire data and reactions in your app code; the components just render and emit events.