SectionLast updated on
Last updated on
A titled container that collapses on pages holding none of its keeps.
Section groups related Fields and Tables under a heading. It carries no
pagination id of its own — data-section, not data-keep-id — precisely so
a section that runs well past one page is never treated as a single thing
that has to stay together; the keeps inside it are what the page plan
actually moves.
Preview
Installation
npx shadcn@4 add @paradoc/sectionOr, with the Paradoc CLI, which writes the namespace into components.json for you:
npx paradoc-cli add sectionInstalls to components/paradoc/section.tsx and brings along keep-together.
Usage
import { Section } from "@/components/paradoc/section";<Section id="customer" title="Prepared for" className="flex flex-col gap-1"> <Field path="customer" label={false} className="font-medium text-neutral-900" /> <Field path="customerContact" label={false} className="text-neutral-700" /> <Field path="customerAddress" label={false} className="text-neutral-600" /></Section>| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | — | Stable id the page plan uses to decide whether this section renders on a page. |
| title? | string | — | Heading shown above the section's children; omitted renders no heading. |
| className? | string | — | Classes replacing the section's default column layout. |
| children | ReactNode | — | The fields, tables, or other content grouped under this section. |
Composition
A Section needs a Document above it for the
same reason a Field does: it reads, from context only Document's tree
provides, which of its own keeps landed on the current page. Give it a
stable id — the page plan uses it to decide whether the section shows at
all on a given page, so it should be unique within the document and stable
across renders, not derived from the data being shown.
A Section's heading, when it has a title, is itself a
Keep Together — that is
the one piece of pagination machinery it brings along automatically. The
heading stays with the section's first keep: when that keep starts the next
page, the heading moves there with it rather than ending a page alone. The
rest of the section is ordinary children: put whatever
Fields or Tables belong
together inside it. Section renders them as given and collapses to
nothing — heading included — on any page holding none of them, without ever
treating the section itself as one unit that has to stay together.
When a tenant sets an accent color, a titled section's heading is one of the three places it lands, alongside an emphasized Totals row and an emphasized Table footer row. See Document for how tokens reach a document.
The heading's size follows the document's typography
token, and it is already at the smallest verified size, so compact leaves it
where it is.
Variants
Section takes an optional title and a className that replaces its
default column layout.
Titled
The default: a title renders a heading above the section's children.
Untitled
Omitting title renders no heading at all — just the children.
Row layout
A custom className replaces the default column layout with a row.