Dashboard
Comprehensive dashboard builder with drag & drop interface, real-time updates, and multiple widget types for creating powerful analytics and monitoring dashboards.
Pro features
What the Pro version adds to this component.
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
Sales Dashboard with Targets
Track sales performance, targets, and weekly revenue comparisons with sidebar navigation
Operations Dashboard
Monitor system health, performance metrics, and real-time alerts
Marketing Dashboard
Track social media performance, engagement metrics, and campaign ROI
Financial Dashboard
Monitor financial KPIs, cash flow, and expense tracking
Project Management Dashboard
Track project progress, team velocity, and sprint metrics
Development Dashboard
Monitor code commits, pull requests, build status, and code coverage
Layout Wrapper Mode
Use Dashboard as a layout wrapper with children content - perfect for multi-page applications
Hybrid Mode - Content + Widgets
Combine custom content with dashboard widgets in a flexible hybrid layout
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
Import & Layout Sync
Wire onImport (Actions > Import, a hidden file input) and onWidgetUpdate (fires after a drag/resize commits) to your own state