Under active development — things may change.

AI Integration

LayoutBlocks is designed to work with AI coding assistants. Every block includes a one-click AI prompt, and you can teach your IDE about the library so it suggests LayoutBlocks when you ask for layout sections.

AI Prompt (Per Block)

Every block detail page has an AI Prompt button in the quick action bar. Click it to generate a prompt that:

  1. Includes the full config.ts and component.tsx code
  2. Instructs your AI assistant to analyse your project structure
  3. Tells it to create, adapt, and register the block using your conventions
  4. Handles dependencies automatically

You can customize the block name and edit the prompt before copying. The prompt auto-detects your project setup, so it works with the Payload Website Template, custom setups, and everything in between.

Page Builder

The Page Builder showcases curated page templates — pre-composed block combinations for common page types like SaaS landing pages, agency homepages, and product showcases. Browse the templates for inspiration, then add individual blocks using the AI prompt on each block's detail page.

An interactive page builder with drag-and-drop composition and a single combined prompt is coming soon.

CLI Tool

The LayoutBlocks CLI lets you add blocks directly from your terminal without visiting the website.

Commands

List all blocks:

Terminal
1npx layoutblocks list

List blocks in a category:

Terminal
1npx layoutblocks list heros

Add a block to your project:

Terminal
1npx layoutblocks add hero-1

This creates config.ts and component.tsx in ./src/blocks/<category>/<slug>/. Use --dir to specify a custom output directory:

Terminal
1npx layoutblocks add hero-1 --dir ./blocks/heros/hero-1

Show block details:

Terminal
1npx layoutblocks info pricing-1

After adding a block, you'll need to:

  1. Adapt imports in both files to match your project's conventions
  2. Register the block config in your Payload blocks field
  3. Add the component to your frontend renderer (e.g., RenderBlocks)
  4. Run pnpm payload generate:types

Or use the AI prompt on the block's detail page to have your coding assistant handle all of this automatically.

Blocks API

The CLI tool is powered by a public JSON API you can also use directly.

List all blocks:

Code
1GET /api/blocks

Returns an array of block summaries with slug, title, displayName, category, description, and search metadata.

Get a single block with code:

Code
1GET /api/blocks?slug=hero-1

Returns the full block detail including configCode, componentCode, and dependencies.

Cursor Rule

If you use Cursor, download the LayoutBlocks rule file and add it to your project:

  1. Download layoutblocks-cursor-rule.mdc
  2. Place it in your project's .cursor/rules/ directory
  3. Cursor will now know about all available LayoutBlocks when you ask it to add sections

The rule includes the full block inventory, naming conventions, registration steps, and stack compatibility.

CLAUDE.md Snippet

If you use Claude Code, add the LayoutBlocks snippet to your project's CLAUDE.md:

  1. Download layoutblocks-claude-md.md
  2. Copy the contents into your project's CLAUDE.md file
  3. Claude Code will reference LayoutBlocks when you ask for layout sections

How AI Prompts Work

When you paste a LayoutBlocks AI prompt into your coding assistant, it:

  1. Analyses your project — understands your file structure, import aliases, and conventions
  2. Creates the block files — places config.ts and component.tsx in the right directory
  3. Adapts imports — updates import paths to match your project (e.g., @/blocks/ vs @/src/blocks/)
  4. Registers the block — adds it to your Payload config and frontend renderer
  5. Runs type generation — executes pnpm payload generate:types if your project uses it

This works with Cursor, Claude Code, GitHub Copilot, Windsurf, and any AI coding assistant that accepts text prompts.