---
updatedAt: 2026-01-23T21:37:37.000Z
agentTools:
  projectIndex: https://dev.tapcart.com/llms.txt
---

# Examples

Example-driven guides for building Custom Blocks with the Tapcart CLI.

This section contains end-to-end examples of Custom Blocks.

Each example includes:

* A complete `code.jsx`
* A complete `manifest.json`
* Notes on what to customize

## Examples

* [Navigate to a screen/tab using `openScreen`](./example-open-screen-navigate)
* [Destination picker navigation (manifest destination + openScreen)](./example-destination-picker-open-screen)
* [Banner with CTA destination (asset upload + destination)](./example-banner-cta)
* [Countdown timer (date-time + optional destination)](./example-countdown-timer)
* [Accordion (flex-list)](./example-accordion-flex-list)
* [Add to cart button (PDP)](./example-add-to-cart-button)
* [Add to cart with personalization (mockData.json)](./example-add-to-cart-personalization-mock-data)
* [Goal progress bar (mockData.json)](./example-goal-progress-mock-data)
* [Collection bar (data hooks + loading/empty states)](./example-collection-bar)
* [Collections menu with subcollections (flex-list + destinations + drawer)](./example-collections-menu-flex-list)

## Mock Data (optional)

When developing locally, you can add a `mockData.json` file next to `code.jsx` in a block folder.

This is read by the local dev server and makes data available via `useVariables()`.

```json mockData.json
{
  "customer": {
    "id": "<UUID>",
    "firstName": "Taylor"
  },
  "device": {
    "locale": "en-US"
  },
  "cart": {
    "items": []
  }
}
```

Notes:

* `mockData.json` helps when your block uses `useVariables()`.
* `mockData.json` does not mock network-backed hooks (for example, `useCollection`). Those hooks fetch from Tapcart APIs.

Learn more:

* [Local development data - mockData.json vs hooks](./mock-data-vs-hooks)