home

Free, open-source blocks for P1: P1 Blocks.

297 copy-paste blocks for P1, Pantheon’s new CMS, and for any React site. Accessible, responsive from 320px, and free under the MIT License. Try four of them here.

Browse all 297 blocksTry one first

Change a field. Watch it change.

These are the fields an editor gets in P1, with the same labels and help. Type in them and the block re-renders, then copy the file or the line for your agent.

Pick a block

Fields: Typographic Hero

HeroTypographicBlock

Small label above the statement, like your organization's name. Leave blank to hide it.

Keep it under about 12 words. Wrap one phrase in *asterisks* to set it in the accent color.

Use H1 when this hero is the top of the page. The look doesn't change.

One or two sentences under the statement. Leave blank to hide it.

Leave blank to hide it.

A path (/about), full URL, #anchor, mailto: or tel:.

Facts row (3)

Small facts along the bottom rule, like where you are and when you started.

  1. Founded: 1991
  2. Counties served: 11
  3. Accredited by: Land Trust Accreditation Commission
Show
Screen
Edition

Or tell your coding agentFetch https://p1-blocks.prolificdigital.io/r/hero-typographic.md and follow it to add this block to my P1 project.

P1 edition, 133 lines. Save it as components/puck/hero-typographic-block.tsx and register it as HeroTypographicBlock. See Typographic Hero on P1 Blocks

Want the whole editor, drag and drop and all? Try the full Puck editor.

How it works

  1. Pick a block.

    297 of them, in 23 categories. Preview each one, then choose an edition: P1 for a Puck project, React for anything else.

  2. Copy one file.

    Copy code gives you a single .tsx file. In P1, save it in components/puck and register it in puck.config.tsx. In React, import it like any other component.

  3. Publish.

    Editors fill in the fields in P1, with help under each one, and the block renders on the server. Most blocks send no JavaScript to the browser at all.

Or hand it to your agent.

Every block has a brief written for coding agents: where the file goes, how to register it and what not to change. Tell Claude Code, Cursor or Codex:

Fetch https://p1-blocks.prolificdigital.io/r/hero-split.md and follow it.

The whole catalog, with every brief, is in one file: llms.txt.

What’s in it

Blocks
297
Categories
23
Editions
P1 and React
License
MIT

Sections every site needs, and the ones the sites we build ask for: course catalogs, council meetings, library hours, donation forms and dashboards that bind to live data.

  • Heroes12
  • Content16
  • Social proof14
  • Conversion20
  • Forms7
  • Ecommerce6
  • Enrollment6
  • Civic & utility12
  • Headers7
  • Footers7
  • Higher ed20
  • Nonprofit20
  • Municipal20
  • Parks & rec15
  • Foundations10
  • K-1210
  • Libraries10
  • Health10
  • Arts & culture10
  • Tourism10
  • Dashboards25
  • GPU effects20
  • Carousels10

Questions

P1 Blocks, explained.

  • A free, open-source library of 297 blocks for P1, Pantheon’s new CMS (Pantheon Content Publisher). Each one is a Puck component with editor fields, help text and realistic sample content, ready to register. Each one also comes as a plain React component.

  • Yes. It’s MIT licensed: use it in client work and commercial projects, change it, ship it. Keep the license notice with the code.

  • No. The React edition is the same block as a plain component, with typed props that are all optional and sample content exported beside it. It works in any React project that uses Tailwind CSS v4: Next.js, Vite, Remix, or Astro with React.

  • Every block has a brief at /r/<slug>.md (or .react.md for the React edition): where the file goes, how to register it, what not to change, and the full source. Tell Claude Code, Cursor or Codex to fetch the brief and follow it. The whole catalog is listed at /llms.txt.

  • Most don’t. A standard block is one file with no dependencies and no client JavaScript, and anything interactive uses native HTML, like details and forms. The exceptions say so: the carousels use GSAP, the GPU effects use vgpu (WebGPU) with a designed fallback, and Live Metric refreshes one number in the browser.

  • They’re written to WCAG 2.2 AA: real links and buttons, labelled inputs, visible keyboard focus, passing contrast, and nothing said by color alone. Section blocks let the editor choose the heading level, because the editor knows the page outline. Still test the finished page; a block can’t check the words and images you put in it.

  • The accent is Tailwind’s indigo throughout, over neutral grays. Find and replace indigo- with your own color and every block follows. Fonts and the rest of the theme come from your site.

  • Yes. We design and build on P1 and Pantheon, with one team from the first conversation to launch. Tell us about the project and we’ll take it from there.

Take the whole set.

297 blocks across 23 categories, from heroes and forms to public meetings and dashboards. Free, and yours to change.

Browse all 297 blocks

Our P1 workWe’re P1 Charter PartnersOur Pantheon partnershipMore odds and ends