> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mercurjs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Official Blocks

> Modular blocks from the official Mercur registry — install only what you need.

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="mb-12">
    <h1 className="text-4xl font-bold tracking-tight mb-4">Official Blocks</h1>

    <p className="text-lg text-gray-500 dark:text-gray-400 max-w-2xl mb-6">
      Blocks are modular pieces of marketplace functionality — API routes, workflows, UI pages, and data models. Each block is copied directly into your project. You own the code.
    </p>

    <div className="inline-flex items-center gap-3 px-4 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
      <code className="text-sm font-mono text-gray-800 dark:text-gray-100">bunx @mercurjs/cli\@latest add \<block-name></code>
    </div>
  </div>

  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">⭐</span>
        <h3 className="font-semibold text-base m-0">reviews</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Product and seller reviews with ratings, customer/vendor/admin API routes, and workflows.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">admin</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">👥</span>
        <h3 className="font-semibold text-base m-0">team-management</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Team member management with invitations, roles, and vendor portal pages.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">🔖</span>
        <h3 className="font-semibold text-base m-0">wishlist</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Customer wishlist with product bookmarking, pricing context, and store API endpoints.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">🔔</span>
        <h3 className="font-semibold text-base m-0">vendor-notifications</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Vendor notification feed with bell icon in the navbar and a vendor API endpoint.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">🔍</span>
        <h3 className="font-semibold text-base m-0">algolia</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Algolia search integration with product indexing, event-driven sync, and store search API.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">🔎</span>
        <h3 className="font-semibold text-base m-0">meilisearch</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Meilisearch search integration with product indexing, seller moderation sync, filtering, and store/admin API.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">subscriber</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">✅</span>
        <h3 className="font-semibold text-base m-0">requests</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Admin approval system for entity requests — list, review, accept or reject submissions.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">admin</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">📦</span>
        <h3 className="font-semibold text-base m-0">product-import-export</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">CSV product import & export for vendors. Includes API routes, workflows, and portal drawers.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">💬</span>
        <h3 className="font-semibold text-base m-0">vendor-chat</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">TalkJS chat integration for vendors — API endpoint for seller conversations and a Messages page.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>

    <div className="p-5 rounded-xl border border-gray-200 dark:border-gray-800">
      <div className="flex items-center gap-3 mb-1">
        <span className="text-base">✉️</span>
        <h3 className="font-semibold text-base m-0">messaging</h3>
      </div>

      <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">Buyer-vendor messaging with real-time SSE, content filtering, chat blocking, rate limiting, and admin oversight.</p>

      <div className="flex flex-wrap gap-1.5">
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">module</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">workflow</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">api</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">admin</span>
        <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 rounded px-2 py-0.5">vendor</span>
      </div>
    </div>
  </div>

  <div className="mt-10 p-5 rounded-xl border border-gray-200 dark:border-gray-800">
    <p className="text-sm text-gray-500 dark:text-gray-400 m-0">
      Blocks are copied directly into your project — no runtime dependencies on Mercur.
      After installing, follow the setup steps in the <a href="/developer-guide/blocks" className="text-gray-900 dark:text-gray-100 font-medium underline underline-offset-2">Developer Guide</a>.
      Want to build your own? See the <a href="/developer-guide/registry" className="text-gray-900 dark:text-gray-100 font-medium underline underline-offset-2">Registry Guide</a>.
    </p>
  </div>

  <div className="mt-12 mb-4">
    <h2 className="text-2xl font-bold tracking-tight mb-4">Quick Start</h2>

    <h3 className="text-lg font-semibold mb-2">Install a block</h3>

    ```bash theme={null}
    bunx @mercurjs/cli@latest add reviews
    ```

    This copies the block source code into your project:

    ```
    src/
    ├── modules/reviews/          # Data model and service
    │   ├── models/
    │   ├── service.ts
    │   └── index.ts
    ├── workflows/reviews/        # Business logic
    │   ├── create-review.ts
    │   └── index.ts
    ├── api/
    │   ├── admin/reviews/        # Admin API routes
    │   ├── vendor/reviews/       # Vendor API routes
    │   └── store/reviews/        # Storefront API routes
    └── admin/
        └── routes/reviews/       # Admin dashboard pages
    ```

    <h3 className="text-lg font-semibold mt-6 mb-2">Search blocks</h3>

    ```bash theme={null}
    bunx @mercurjs/cli@latest search -q "reviews"
    ```

    <h3 className="text-lg font-semibold mt-6 mb-2">Compare local changes against registry</h3>

    ```bash theme={null}
    bunx @mercurjs/cli@latest diff reviews
    ```
  </div>
</div>