💎 NEW COMPONENT: Pro Metrics Dashboard — Production-Ready Analytics & KPI Overview

Resources & Tutorials
1

1865×1028 44.6 KB

Video Demo: https://youtu.be/LiR2PHwdgTI
More components: kurepadev

Hey Adalo Makers! :waving_hand:

If you are building analytics, e-commerce, CRM, or order-management screens in Adalo, Pro Metrics Dashboard gives you a premium, data-dense overview screen out of the box—no complex layout tweaks or styling workarounds required.

It combines a 4-card KPI grid with a dynamic, paginated collection list into a single responsive component.

2
21290×1454 96.3 KB

1
11102×591 41.1 KB

:high_voltage: Key Features

  • Smart 4-Card KPI Grid: Display key numbers with automatic trend indicators. Entering values like “+2.4%” or “-1.2%” dynamically updates the badge styling (green, red, or neutral gray).

  • Flexible Visibility Controls: Show or hide cards independently to easily convert the view from a 4-metric dashboard to a lean 2-metric panel.

  • Auto-Adapting Layouts: Desktop views automatically render as a clean single row to save vertical space, while mobile displays a 2x2 grid (with manual layout overrides available).

  • Dynamic Collection List: Connect directly to any database collection to showcase thumbnails, titles, secondary metrics, and sub-labels (rendered as plain text or colored status badges).

  • Native Navigation & Skeletons: Built-in tap-to-navigate functionality, paginated lists for high performance, and skeleton loading states to prevent layout flash during data fetching.

  • Full Native Typography Control: Every label, title, and metric leverages Adalo’s native text styling toolbar (font, size, weight, color, alignment) alongside exposed border, shadow, and corner rounding props.

  • Pure React Native Performance: Built with 100% native primitives (View, Text, Image, TouchableOpacity, FlatList) and zero external dependencies for seamless cross-platform reliability on Web, iOS, and Android.

Video Demo: https://youtu.be/LiR2PHwdgTI
More components: kurepadev

1 Like