Dashboard Blocks

Professional dashboard components for displaying metrics, statistics, and data visualizations.

Stats Card

Display key metrics with trend indicators.

Recent Activity

Display recent user activities or transactions.

Overview Dashboard

Complete dashboard layout with multiple sections.

Usage

Customize dashboard blocks for your needs:

Add Real Data

A card fetches nothing. A live figure comes from a data-bound block: an element:number takes its object from the per-element dataSource binding and its aggregate from its properties bag (see the Data Source guide):

{
  "type": "element:number",
  "dataSource": { "object": "order" },
  "properties": { "aggregate": "count" }
}

Customize Colors

{
  "type": "text",
  "content": "+20.1%",
  "className": "text-emerald-500"
}

Add Actions

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

{
  "type": "action:button",
  "properties": {
    "label": "View Details",
    "actionType": "url",
    "target": "/dashboard/details"
  }
}

Next Steps

• Explore Form Blocks
• View Marketing Blocks
• Learn about Data Sources