Skip to content
P1 Blocks

Open-source React components · Next.js, headless WordPress & Drupal, P1

Blocks for P1.
Copy, paste, publish.

Responsive, accessible React components styled with Tailwind, for Next.js, headless WordPress and Drupal front ends, and any React app, plus Puck blocks for P1 with editor fields included. Sections, sets for universities, nonprofits and cities, dashboard widgets, and WebGPU effects. Grab the code, or hand it to your coding agent.

Live demo

Try the blocks in a real editor

Pick the editor your team uses. Both run in your browser, and nothing is saved.

  • Pantheon Content Publisher (P1)

    Puck

    The visual editor P1 is built on. Drag blocks onto a page, edit their fields in the sidebar, then publish to see the result.

    Open in Puck

  • WordPress

    Gutenberg

    WordPress's block editor, running in your browser. Insert blocks from the library, then change their settings in the sidebar.

    Open in Gutenberg

The editors work best on a larger screen.

Browse 297 blocks
blocks
297
zero-dependency
267
categories
23

Catalog

297 blocks

  • 01 / Heroes

    Hero — Split

    Headline, supporting copy and two calls to action beside a large photo. Image side is switchable.

  • 02 / Heroes

    Hero — Centered

    Centered statement hero with an announcement pill, two calls to action and an optional patterned backdrop.

  • 03 / Heroes

    Image Overlay Hero

    Full-bleed photo with an adjustable gradient scrim, headline and buttons anchored bottom-left, and an optional photo credit.

  • 04 / Heroes

    Search Hero

    Portal front door with one large GET search box and popular-search links, built for city and campus sites.

  • 05 / Heroes

    Stats Hero

    Headline and calls to action over a wide photo, with three or four sourced key figures docked on its bottom edge.

  • 06 / Heroes

    Collage Hero

    Copy beside an asymmetric, overlapping three-photo mosaic with an optional round stamp badge.

  • 07 / Heroes

    Form Hero

    Headline and checklist beside a real sign-up form with name, email and interest dropdown that posts to your handler.

  • 08 / Heroes

    Typographic Hero

    Image-free oversized statement with one asterisk-marked phrase in the accent color and a ruled row of facts.

  • 09 / Heroes

    Event Hero

    One event up front: calendar-page date stamp over a photo, time, location, cost, register and add-to-calendar links.

  • 10 / Heroes

    Donate Hero

    Mission line beside a no-JS donation form with preset amount cards, an other-amount field and one-time or monthly choice.

  • 11 / Heroes

    Quick Links Hero

    Photo hero with three or four task cards straddling its bottom edge, so top destinations are one tap away.

  • 12 / Heroes

    Angled Hero

    Copy beside an edge-to-edge photo cut on a diagonal with an accent band tracing the cut; image side flips.

  • 13 / Content

    Feature Grid

    Programs, services or benefits as an icon grid in two, three or four columns.

  • 14 / Content

    Content + Image

    Editorial text with a checklist and link beside a captioned image. The workhorse section.

  • 15 / Content

    Steps

    A numbered how-it-works process, horizontal or vertical, with an optional call to action.

  • 16 / Content

    Timeline

    History and milestones as an ordered timeline. Good for about pages and annual reports.

  • 17 / Content

    FAQ Accordion

    Questions that expand in place on native <details>. No JavaScript, fully keyboard accessible.

  • 18 / Content

    Story Cards

    News, stories or blog posts as image cards with whole-card click targets and no nested links.

  • 19 / Content

    Bento Grid

    An asymmetric mosaic of five to seven small, wide and tall tiles with optional photos, tones and links.

  • 20 / Content

    Zigzag Features

    Numbered rows that alternate photo and text sides to walk readers through a program or process.

  • 21 / Content

    Comparison Table

    Compare two to four plans or options feature by feature in a real table with a pinned first column.

  • 22 / Content

    Article with Contents

    A long-form article in titled sections with a sticky table of contents on desktop and a collapsible one on phones.

  • 23 / Content

    Glossary

    Terms sorted A–Z and grouped by letter, with jump links, cross-references and definition-list markup.

  • 24 / Content

    Video Embed

    Paste a YouTube or Vimeo link for a lazy-loaded, privacy-friendly player with caption and transcript link.

Install

Three steps.
No package.

Blocks are source you own, not a dependency you track. Paste one in, pass it your content, and it's yours to restyle.

  1. 01

    Copy the file

    Open any block, hit Copy code, and save it as components/blocks/<slug>.tsx in any React project with Tailwind CSS v4.

  2. 02

    Pass your content

    Import it and render it. Every prop is typed and optional, and the exported sample content shows the block exactly as previewed.

  3. 03

    On P1? Switch editions

    Flip a block page to P1 for the Puck version: register it in puck.config.tsx and it appears in the editor with fields and defaults ready to go.

Using Claude Code, Cursor or Codex?

Every block ships with a ready-made agent brief, and the whole catalog is at /llms.txt.

View llms.txt