Components Reference

@pantheon-systems/create-p1-starter-kit ships a working set of components out of the box, registered in puck.config.tsx and organized into sidebar categories. This section catalogs what’s there and how each one is put together, useful both as a reference and as worked examples before you write your own (see Fields Reference for the field types these use, and Puck’s own Component Configuration docs for the underlying API these components are built against).

File locations below are relative to a project scaffolded from the starter kit: components/puck/*.tsx, registered in puck.config.tsx at the project root.

What’s on each page

Matches the sidebar categories puck.config.tsx actually defines:

Typography: Heading, Paragraph, Quote, List.
Media: Image, Media Figure, and which one to actually reach for.
Data: Card Grid, Data List, datasource-bound, not editor-typed.
Layout: Divider, Spacer.
Actions: Button.
Page Sections: P1 Welcome.

Shared conventions worth copying

Every one of the hand-written components in this section follows the same small pattern, visible if you read two or three of the files:

A shared blockPaddingClass constant (px-16 py-6) applied consistently, imported from ./block-padding.
Plain Tailwind utility classes inline, no CSS modules, no styled-components.
Defensive rendering for empty/missing values (e.g. the Image block shows a gray placeholder box rather than a broken <img> when src is empty).
TypeScript prop types declared inline on render, not as a separate named interface.

New components you write should follow the same shape unless there’s a specific reason not to: it’s what the rest of the team will expect to find.