Components · Data display

Code block

Code or data typed on a well of tint, with line numbers, highlighting in one pen and a copy button.

Terminal

npx shadcn add @fineliner/code-block

The booking

booking.json

JSON

{  "id": "BK-1105-1600",  "room": 1,  "guest": "Maya Singh",  "guests": 2,  "starts": "2026-11-05T16:00:00+01:00",  "ends": "2026-11-05T17:00:00+01:00",  "records": ["LR-0414", "LR-0423"],  "hold": { "record": "LR-0414", "until": "2026-11-05T17:00:00+01:00" },  "paid": false}

A drawing, from code

sleeve-art.tsx

TSX

import { Drawing } from "@/fineliner/drawing/drawing"
// Same seed, same record, in every build.export function SleeveArt({ id, title }: { id: string; title: string }) {  return (    <Drawing      object="record"      seed={id}      seed={`sleeve:${id}`}      title={title}    />  )}

Seeded · the same drawing everywhere

Variants

Shell, small

npx shadcn add @fineliner/code-block

Destructive

npm run dev

Error: unknown object "gramophone"
    at drawing (src/fineliner/pen/drawing-svg.ts:41:22)
    at SleeveArt (src/site/listening-room/sleeve-art.tsx:6:5)

Wrapped

curl -s "https://listeningroom.example/api/bookings?room=1&date=2026-11-05&include=records,holds"