Installation

Last updated on

Set this up once per project, before installing any component or block.

Register the namespace

Add the @paradoc registry to your project's components.json:

{
  "registries": {
    "@paradoc": "https://docs.paradoc.dev/r/{name}.json"
  }
}

Install the substrate

Install the styles, preview pages, and document component explicitly. The components bring the public runtime packages they import; document itself brings @paradoc/react and @paradoc/types. The preset writes styles/paradoc.css:

npx shadcn@4 add @paradoc/document-styles @paradoc/pages @paradoc/document

Then import the preset in your global stylesheet:

/* your global stylesheet */
@import "@/styles/paradoc.css";

The components are styled with Tailwind utility classes, so a Tailwind project needs no further setup. Without Tailwind, every component that draws markup takes a className that replaces its defaults. PageBreak is the exception: it controls pagination without drawing visible markup.

Versions

An installed component is written against one version of @paradoc/react, and each item declares that version, so the CLI installs the substrate it was generated from. Two consequences worth knowing before you start:

• Install the components you want together, and update them together. Adding field today and table after two releases leaves two files written against two substrates in one project.
• Upgrading @paradoc/react means reviewing the matching component sources. The CLI does not overwrite an edited file unless you explicitly pass --overwrite, so upgrades remain a source change you control.

Install PDF output

The components render in the browser without anything else. To render a composition to PDF on the server, add @paradoc/react-pdf:

npm install @paradoc/react-pdf

Adding a component

With the registry namespace registered, install a component by name:

npx shadcn@4 add @paradoc/field

Or, with the Paradoc CLI, which writes the namespace into components.json for you and then runs the same install:

npx paradoc-cli add field

With the CLI installed globally (npm install -g paradoc-cli), the command is paradoc add field.

Files land in components/paradoc/. A component that builds on another brings it along: installing field also installs keep-together.

Without a registry entry in components.json, the full URL works too:

npx shadcn@4 add https://docs.paradoc.dev/r/field.json

Each component's own page (for example field) shows its exact install command, the file it places, and any dependency it brings along.