DocumentLast updated on
Last updated on
Binds one form artifact and its data to everything beneath it.
Document is where a composition meets a real artifact: it loads the form
definition and its data once, and everything nested inside it — every
Field, Section, and Table — reads through the context only Document
provides. Rendering any of those components outside a Document throws.
Preview
Installation
npx shadcn@4 add @paradoc/documentOr, with the Paradoc CLI, which writes the namespace into components.json for you:
npx paradoc-cli add documentInstalls to components/paradoc/document.tsx.
Usage
import { Document } from "@/components/paradoc/document";<Document artifact={proposalForm} data={shortProposalData} tokens={{ accentColor: "#b45309" }}> <Section id="summary" title="Summary"> <Field path="summary" label={false} /> </Section></Document>| Prop | Type | Default | Description |
|---|---|---|---|
| artifact | Form | — | The form artifact this document binds to; every component beneath it reads from it. |
| data | DocumentData | — | The values that fill the artifact's fields. |
| format? | FormatOptions | — | How values without a matching serializer are formatted, and which locale registry covers the rest. |
| tokens? | DocumentTokensInput | — | Tenant branding applied to this document and every component nested inside it. |
| id? | string | — | Value for the wrapping element's data-document-id; falls back to the artifact name.
Keep ids remain document-global, so repeated compositions must give their keeps distinct ids. |
| className? | string | — | Classes for the document's wrapping element. |
| children | ReactNode | — | The document's composed content. |
Composition
A Document is its own root when nothing wraps it, exactly like a
Bundle around one. Nested inside a Bundle, it
inherits that bundle's tokens instead of resolving its own, and only the
outermost of the two may set pageSize, marginPx, dir, lang, or typography — a
nested Document that tries throws, since those tokens decide the paper
every document in the composition shares.
format swaps in a different formatter or serializer registry: the same one
every Field and Table beneath
this Document reads through, so changing it here changes how every value
underneath prints, without touching any of those components themselves.
Document brings along no Keep Together of
its own — Field, a titled Section, and Table each bring their own. Its
job is the context those keeps read, not a pagination unit itself.
A composition with more than one Document belongs inside one
Bundle; pagination itself starts once the whole tree
is rendered inside Pages.
The root's default classes follow the typography
token: scale steps its text size and leading, flow its gap between blocks.
A className you pass replaces them and wins.
Variants
Document takes an optional id, format, tokens, and a className that
replaces its default column layout.
Custom layout
A custom className lays the document's children out in a row instead of a
column.
Custom format
A format override changes how a field type prints — here, an organization
prints only its name instead of the default's fuller detail.
Branded tokens
tokens cascades to every component nested inside — here, a titled
section's heading picks up the accent color.