---
title: "Official Blocks"
sidebarTitle: "Official Blocks"
description: "Modular blocks from the official Mercur registry — install only what you need."
mode: "custom"
---

<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 &lt;block-name&gt;</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>

  <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
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
bunx @mercurjs/cli@latest search -q "reviews"
```

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

```bash
bunx @mercurjs/cli@latest diff reviews
```

  </div>

</div>