Dashboard
Comprehensive dashboard builder with drag & drop interface, real-time updates, and multiple widget types for creating powerful analytics and monitoring dashboards.
Pro Features
Unlock advanced capabilities with the Pro version
Templates Gallery
Browse ready-made dashboard templates in a dialog and apply a full layout instantly via the templates prop
Widget Library
8 built-in widget types — metric, chart, activity, progress, comparison, map, table and calendar — added from a slide-in panel
Editable Widget Layout
Drag to rearrange widgets on a responsive grid, with add and remove wired to the onWidgetAdd and onWidgetRemove callbacks
Real-time Mode
Enable the realtime prop to stream live metric and activity updates across every widget
Glassmorphism Theme
Turn on the glassmorphism prop for a modern frosted-glass surface treatment
Export Dashboards
Export the current dashboard as JSON, PDF or PNG through the onExport callback
Installation
Install via CLI
npx @moontra/moonui-cli add dashboardUsage
Analytics Dashboard
Real-time analytics and insights
Examples
Analytics Dashboard
Comprehensive analytics dashboard with real-time metrics, charts, and activity feeds
Analytics Dashboard
Real-time analytics and insights
Sales Dashboard with Targets
Track sales performance, targets, and weekly revenue comparisons with sidebar navigation
Sales Performance
Track sales targets and performance
Operations Dashboard
Monitor system health, performance metrics, and real-time alerts
System Operations
Real-time system monitoring
Marketing Dashboard
Track social media performance, engagement metrics, and campaign ROI
Marketing Analytics
Social media and campaign performance
Financial Dashboard
Monitor financial KPIs, cash flow, and expense tracking
Financial Overview
Key financial metrics and performance
Project Management Dashboard
Track project progress, team velocity, and sprint metrics
Project Overview
Sprint progress and team metrics
Development Dashboard
Monitor code commits, pull requests, build status, and code coverage
Development Metrics
Code activity and build status
Layout Wrapper Mode
Use Dashboard as a layout wrapper with children content - perfect for multi-page applications
Application Dashboard
Comprehensive business management platform
Welcome Back!
Here's what's happening with your business today.
Quick Stats
Recent Activity
Main Content Area
This is your main application content. The Dashboard component is now acting as a layout wrapper, providing a consistent header, sidebar navigation, and structure for your application.
You can put any React components here - forms, tables, charts, or any other content your application needs.
Hybrid Mode - Content + Widgets
Combine custom content with dashboard widgets in a flexible hybrid layout
Hybrid Dashboard
Content with live widgets sidebar
Main Application Content
This is your primary content area. The widgets on the right provide real-time insights while your main application functionality lives here.
Project Status
Team Performance
Data Analysis
Your custom analysis tools, forms, or any other application content can be placed here while keeping key metrics visible in the widgets sidebar.
Widgets
Data Widgets - Table, Map & Calendar
Tabular, geographic and schedule data in the default widgets mode - no extra wiring, the widget type is the whole API
Operations Data
Table, map and calendar widgets in the default widgets mode
Import & Layout Sync
Wire onImport (Actions > Import, a hidden file input) and onWidgetUpdate (fires after a drag/resize commits) to your own state
Import & Layout Sync
Drag a widget after Actions > Edit Layout, or import a file from Actions > Import