mdoc
UI
Playground
Demo
Docs
GitHub
20 nodes
Markup
## Store Dashboard — March 2026 {% card title="Key Metrics" %} {% grid cols=4 %} {% stat label="Revenue" value="$48,290" change="+12.4%" trend="up" /%} {% stat label="Orders" value="1,284" change="+8%" trend="up" /%} {% stat label="Customers" value="892" change="+5.2%" trend="up" /%} {% stat label="Avg Order" value="$37.61" change="-1.8%" trend="down" /%} {% /grid %} {% /card %} {% card title="Revenue Trend" %} {% chart type="line" labels=["Jan","Feb","Mar","Apr","May","Jun"] values=[32100,28400,35200,41800,39600,48290] title="Monthly Revenue (2026)" /%} {% /card %} {% tabs labels=["Top Products","By Channel","Inventory"] %} {% tab label="Top Products" %} {% table headers=["Product","Units","Revenue","Margin"] rows=[["Wireless Earbuds Pro",842,"$33,680","42%"],["USB-C Hub 7-in-1",631,"$18,930","38%"],["Laptop Stand",524,"$15,720","45%"],["MagSafe Case",498,"$7,470","52%"],["Screen Protector 3-Pack",412,"$4,120","65%"]] /%} {% /tab %} {% tab label="By Channel" %} {% grid cols=3 %} {% stat label="Website" value="$28,974" change="+15%" trend="up" /%} {% stat label="Mobile App" value="$12,072" change="+22%" trend="up" /%} {% stat label="Marketplace" value="$7,244" change="-3%" trend="down" /%} {% /grid %} {% chart type="pie" labels=["Website","Mobile App","Marketplace"] values=[60,25,15] title="Revenue Share %" /%} {% /tab %} {% tab label="Inventory" %} {% table headers=["Product","Stock","Status","Reorder"] rows=[["Wireless Earbuds Pro",124,"OK","No"],["USB-C Hub 7-in-1",18,"Low","Yes"],["Laptop Stand",203,"OK","No"],["MagSafe Case",7,"Critical","Yes"]] /%} {% callout type="warning" title="Low Stock Alert" %} 2 products need reordering before the weekend rush. {% /callout %} {% /tab %} {% /tabs %} {% card title="Monthly Target" %} {% progress value=78 label="Revenue Goal — $62,000" /%} {% /card %} {% accordion title="Customer Segments" %} {% grid cols=2 %} {% stat label="New Customers" value="234" change="+18%" trend="up" /%} {% stat label="Returning" value="658" change="+3%" trend="up" /%} {% /grid %} {% /accordion %} {% callout type="success" title="Milestone" %} You've crossed **$45K monthly revenue** for the first time! {% badge label="New Record" variant="success" /%} {% /callout %} {% card title="Quick Actions" %} {% form name="export" %} {% select name="report" label="Report Type" options=["Sales Summary","Product Performance","Customer Analytics","Inventory Status"] /%} {% select name="format" label="Format" options=["PDF","CSV","Excel"] /%} {% button action="submit:export" label="Export Report" variant="primary" /%} {% /form %} {% /card %} {% button action="continue" label="View full analytics" variant="primary" /%} {% button action="continue" label="Compare with last month" variant="outline" /%} {% button action="continue" label="Forecast next quarter" variant="ghost" /%}
Preview
Store Dashboard — March 2026
Key Metrics
Revenue
$48,290
+12.4%
Orders
1,284
+8%
Customers
892
+5.2%
Avg Order
$37.61
-1.8%
Revenue Trend
Monthly Revenue (2026)
32100
Jan
28400
Feb
35200
Mar
41800
Apr
39600
May
48290
Jun
Top Products
By Channel
Inventory
Monthly Target
Revenue Goal — $62,000
78%
Customer Segments
New Customers
234
+18%
Returning
658
+3%
Milestone
You've crossed
$45K monthly revenue
for the first time!
New Record
Quick Actions
Report Type
Sales Summary
Product Performance
Customer Analytics
Inventory Status
Format
PDF
CSV
Excel
Export Report
View full analytics
Compare with last month
Forecast next quarter
Write mdocUI markup and see it render live
Documentation