---
name: framebrick-blocks
description: Build whole pages from Framebrick page blocks (heroes, services, projects, testimonials, team, blog, FAQ, contact, footers) with the shadcn CLI. Use when a task asks for a landing page, a page section or a page layout in a Next.js project, or when components.json lists @framebrick-blocks.
---

# Building pages with Framebrick blocks

Framebrick Blocks are whole page sections from our templates in one default look, as a private shadcn registry
(`@framebrick-blocks`). They come with a Pro or Ultimate plan. The blocks copy into the project (you own the files), use
Motion and the shadcn theme, and follow one set of type tokens. Previews and props: https://framebrick.co/blocks

## Before you start

- A Next.js project with Tailwind CSS 4 and shadcn/ui initialised (`components.json` exists).
- The user's plan. The registry answers 401 without the member's token. If `components.json` has no `@framebrick-blocks`
  entry or `FRAMEBRICK_TOKEN` is not set, **stop and tell the user what is needed** (a Pro or Ultimate plan, the token from
  https://framebrick.co/account). Do not hand-write a block to get around it, and never paste a token into a file that is
  committed.
- The registry entry, with the token read from the environment:

  ```json
  {
    "registries": {
      "@framebrick-blocks": {
        "url": "https://framebrick.co/r/blocks/{name}.json",
        "headers": { "Authorization": "Bearer ${FRAMEBRICK_TOKEN}" }
      }
    }
  }
  ```

  with `FRAMEBRICK_TOKEN=fbk_…` in `.env.local`.

## Workflow

1. **Plan the page from the library.** MCP (`https://mcp.framebrick.co`): `plan_page` with what the user wants, or `search`
   with `type: "block"`. Without MCP, browse https://framebrick.co/blocks. A page is usually a header, a hero, two to four
   sections and a footer. Use a block once per page.
2. **Read each block** before wiring it (`get_block`, or its page): its props, the components it installs and its notes. Never
   invent a prop.
3. **Install the tokens once**, then the blocks:

   ```bash
   npx shadcn@latest add @framebrick-blocks/tokens
   npx shadcn@latest add @framebrick-blocks/<block>
   ```

   A block brings its Framebrick UI components, shadcn primitives and npm packages. The tokens only add what
   `app/globals.css` does not define, so the project's own values survive.
4. **Wire it in.** Keep the block's structure and motion. Replace the demo copy, links and images with the project's own and
   pass real data through the documented props. Compose the page in order; do not rewrite a block's markup.
5. **Theme with variables, not edits.** Change the shadcn CSS variables in `app/globals.css`; every block follows. Do not
   hard-code colours or fonts inside a block.
6. **Check.** Reduced motion, keyboard, a 390 px wide screen, and dark mode if the project has it.

## Rules

- Motion: wrap the app once in `<MotionConfig reducedMotion="user">` (from `motion/react`, inside a client component). Blocks
  that animate something else (a marquee, a slideshow that plays by itself) check the setting themselves: leave that code.
- A block that takes a function prop must be rendered from a client component.
- The photos, logos and copy in the previews are demonstration content: replace them with the project's own.
- If nothing in the library fits a section, say so and ask; do not force a near match.