@usecarte/components

Styled React components for Carte — Tailwind + Recharts, shipped as a json-render registry citizen with mandatory provenance receipts.

Install

pnpm add @usecarte/components @usecarte/core @usecarte/components-core \
  @json-render/core @json-render/react react

You'll typically also install @usecarte/json-render so you can render plans end-to-end with a single <CarteRenderer>.

Usage

import { defaultCatalog, defaultRegistry } from "@usecarte/components";

// Pass `defaultCatalog` to your UI adapter so the LLM sees the prop shapes.
// Pass `defaultRegistry` to your renderer so it knows which React component
// each id resolves to. The two share a single source of truth.

End-to-end (with @usecarte/json-render):

import { CarteRenderer } from "@usecarte/json-render/client";
import { defaultRegistry } from "@usecarte/components";
import { hydrate, toUIAdapter } from "@usecarte/json-render";
import { defaultCatalog } from "@usecarte/components";

const uiAdapter = toUIAdapter(defaultCatalog);
// ...validate plan, execute, then:
<CarteRenderer plan={plan} results={results} registry={defaultRegistry} />;

What's in the catalog

Bar, Line, Metric, Table, Card, Layout, ReceiptButton. The catalog deliberately excludes a title prop — every panel's title is injected from the entry's titleTemplate so the LLM can never author display strings.

Provenance receipts

Every rendered panel ships an audit receipt (which query ran, with what params, what role, when, which formatter produced each visible value). A component from this package rendered outside a <CarteRenderer> throws CarteProvenanceError. See the repo root README.

License

MIT