Widgets
Professional dashboard widgets and data visualization components. Includes KPI, charts, gauges, revenue analytics, and server monitoring widgets.
Pro features
What the Pro version adds to this component.
6 Different Widget Types
Comprehensive dashboard support with KPI, Chart, Gauge, Funnel, Revenue, and ServerMonitor widgets
8+ Background Variants
Multiple style options including default, glass, gradient, overlay, floating, colored, bordered and minimal
8-Direction Gradients
Full compass gradient directions (to-t, to-tr, to-r, to-br, to-b, to-bl, to-l, to-tl) with smooth transitions
Overlay Patterns
4 different overlay patterns (dots, grid, diagonal, waves) with customizable opacity and colors
Floating Effects
Advanced hover animations with dynamic shadow effects and smooth transitions
Flexible Layout System
Responsive dashboard layouts with grid system and adaptive sizing
Revenue Forecasting & Metrics
Built-in revenue breakdown, forecasting and customer metrics (ARPU, LTV, CAC, churn, retention) via RevenueWidget
Smart Alerts
Threshold-based automatic notifications and alerts with visual indicators
Installation
Install via CLI
npx @moontra/moonui-cli add widgets --proUsage
Key Performance Indicators
Total Revenue
45231.57$
Examples
KPI Widget Examples
Display key performance indicators with trends, targets and status indicators. Passing onKPIClick turns each KPI row into a real button — focusable with Tab and activated with Enter or Space; without the handler the row stays static.
Chart Widget Examples
Interactive charts with multiple visualization types including bar, line, area and donut charts. Passing onDataPointClick makes each bar keyboard reachable (Tab) and activatable with Enter or Space.
Gauge Widget Examples
System performance and resource usage gauges with customizable thresholds and indicators. Passing onGaugeClick makes each gauge focusable with Tab and activatable with Enter or Space.
Funnel Widget Examples
Conversion funnel visualization with multiple display formats and real-time analytics. A stage becomes interactive only when interactive (default true) and onStageClick are both in play — then it is focusable with Tab and activatable with Enter or Space.
Revenue Widget Examples
Comprehensive revenue tracking with breakdown analysis, forecasting and customer metrics.
Server Monitor Widget Examples
Real-time server monitoring with status indicators, alerts and performance metrics.
Complete Dashboard Layout
Real-world dashboard composition using multiple widgets together in a responsive grid layout.
Widget Background Variants
Showcase all available background variants with different visual styles and effects.
Widgets with Overlay Effects
Showcase of widgets using overlay background variant for modern glass-morphism effects.
Background Variants Showcase
Various background styles for widgets - gradient, colored, glass, bordered, and floating effects.