E-commerce Blocks

Professional e-commerce components for online stores and marketplaces.

Product Card

Product display with image, title, price, and actions.

Product Grid

Multiple products in a responsive grid.

Shopping Cart

Cart summary with items and checkout.

Order Summary

Checkout order review.

Usage

Customize e-commerce blocks for your store:

Add Product Data

A card fetches nothing. Records come from a data-bound block that names its object in the per-element dataSource binding (see the Data Source guide):

{
  "type": "object-grid",
  "dataSource": { "object": "product", "limit": 20 }
}

Add to Cart Action

A control that runs something is its own node type, action:button, and its props go in the properties bag; actionType: "api" sends the request to target:

{
  "type": "action:button",
  "properties": {
    "label": "Add to Cart",
    "actionType": "api",
    "target": "/api/cart",
    "method": "POST"
  }
}

Customize Pricing Display

{
  "type": "text",
  "content": "$299.99",
  "className": "text-2xl font-bold text-primary"
}

Next Steps

• Browse Authentication Blocks
• Explore Dashboard Blocks
• Learn about Actions