Build beautiful, accessible KPI dashboards using the V2 JSON Layout API
Create simple KPI cards with values, labels, trends, and icons. Perfect for dashboard overviews.
const config = {
version: 2,
layoutId: "basic-kpi-demo",
breakpoints: { xs: 1, sm: 2, lg: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 24847,
label: "Total Users",
trend: "up",
trendValue: "+12.5%",
icon: "fas fa-users",
colorScheme: "blue"
}
},
{
content: {
type: "kpi",
value: 156420,
label: "Revenue",
prefix: "$",
trend: "up",
trendValue: "+8.3%",
icon: "fas fa-dollar-sign",
colorScheme: "green"
}
},
{
content: {
type: "kpi",
value: 3847,
label: "Orders",
trend: "down",
trendValue: "-2.1%",
icon: "fas fa-shopping-cart",
colorScheme: "orange"
}
},
{
content: {
type: "kpi",
value: 98.7,
label: "Uptime",
suffix: "%",
trend: "neutral",
icon: "fas fa-server",
colorScheme: "purple"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo1-output', config);Add inline sparkline charts to show trends over time. Great for visualizing performance metrics.
const config = {
version: 2,
layoutId: "sparkline-kpi-demo",
breakpoints: { xs: 1, md: 2, lg: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 847,
label: "Daily Active Users",
sparkline: [65, 72, 68, 85, 78, 92, 88, 95, 89, 102],
trend: "up",
trendValue: "+15%",
colorScheme: "blue"
}
},
{
content: {
type: "kpi",
value: 23450,
label: "Page Views",
sparkline: [120, 145, 135, 160, 155, 175, 168, 180, 190, 195],
trend: "up",
trendValue: "+23%",
colorScheme: "green"
}
},
{
content: {
type: "kpi",
value: 4.2,
label: "Avg Session (min)",
sparkline: [3.8, 4.0, 3.9, 4.1, 4.3, 4.2, 4.4, 4.1, 4.3, 4.2],
trend: "neutral",
colorScheme: "purple"
}
},
{
content: {
type: "kpi",
value: 2.1,
label: "Bounce Rate",
suffix: "%",
sparkline: [2.8, 2.5, 2.4, 2.3, 2.4, 2.2, 2.1, 2.2, 2.1, 2.1],
trend: "down",
trendValue: "-0.7%",
colorScheme: "teal"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo2-output', config);KPI Cards support 9 color schemes: blue, green, red, orange, purple, pink, teal, indigo, and slate.
const schemes = ['blue', 'green', 'red', 'orange', 'purple', 'pink', 'teal', 'indigo', 'slate'];
const config = {
version: 2,
layoutId: "color-schemes-demo",
breakpoints: { xs: 1, sm: 2, lg: 3 },
gap: "1.5rem",
items: schemes.map((scheme, index) => ({
content: {
type: "kpi",
value: (index + 1) * 1000,
label: scheme.charAt(0).toUpperCase() + scheme.slice(1) + " Scheme",
trend: index % 2 === 0 ? "up" : "down",
trendValue: index % 2 === 0 ? "+5%" : "-3%",
colorScheme: scheme
}
}))
};
RSL.JSONLayout.renderLayout('#demo3-output', config);Add progress indicators to show completion status or goal progress.
const config = {
version: 2,
layoutId: "progress-kpi-demo",
breakpoints: { xs: 1, md: 2, lg: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 75,
suffix: "%",
label: "Project Completion",
progress: 75,
progressMax: 100,
progressLabel: "75% Complete",
colorScheme: "blue"
}
},
{
content: {
type: "kpi",
value: 8500,
prefix: "$",
label: "Monthly Revenue Goal",
progress: 8500,
progressMax: 10000,
progressLabel: "$8,500 of $10,000",
colorScheme: "green"
}
},
{
content: {
type: "kpi",
value: 42,
label: "Tasks Completed",
progress: 42,
progressMax: 50,
progressLabel: "42 of 50 tasks",
colorScheme: "purple"
}
},
{
content: {
type: "kpi",
value: 92,
suffix: "%",
label: "Customer Satisfaction",
progress: 92,
progressMax: 100,
progressLabel: "Target: 90%",
colorScheme: "teal"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo4-output', config);KPI Cards come in three sizes: compact, default, and large.
const config = {
version: 2,
layoutId: "sizes-kpi-demo",
breakpoints: { xs: 1, md: 3 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 1234,
label: "Compact Size",
size: "compact",
trend: "up",
trendValue: "+5%",
colorScheme: "blue"
}
},
{
content: {
type: "kpi",
value: 5678,
label: "Default Size",
trend: "up",
trendValue: "+10%",
colorScheme: "green"
}
},
{
content: {
type: "kpi",
value: 9012,
label: "Large Size",
size: "large",
trend: "up",
trendValue: "+15%",
colorScheme: "purple"
}
}
]
};
RSL.JSONLayout.renderLayout('#demo5-output', config);Combine glow effects, accent styling, animations, and secondary values for premium KPI displays.
const config = {
version: 2,
layoutId: "advanced-kpi-demo",
breakpoints: { xs: 1, md: 2 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 125000,
prefix: "$",
label: "Total Revenue",
trend: "up",
trendValue: "+18.5%",
comparison: "vs last quarter",
secondaryValue: 98500,
secondaryLabel: "Previous: $98,500",
icon: "fas fa-chart-line",
colorScheme: "green",
glow: true,
animate: true
}
},
{
content: {
type: "kpi",
value: 4.85,
label: "Customer Rating",
suffix: "/5",
trend: "up",
trendValue: "+0.3",
comparison: "from 1,247 reviews",
icon: "fas fa-star",
colorScheme: "orange",
accent: true,
accentValue: true
}
},
{
content: {
type: "kpi",
value: 99.97,
suffix: "%",
label: "System Uptime",
trend: "neutral",
comparison: "Last 30 days",
sparkline: [99.9, 99.95, 99.98, 99.97, 100, 99.99, 99.97, 99.98],
icon: "fas fa-server",
colorScheme: "teal",
glow: true
}
},
{
content: {
type: "kpi",
value: 2847,
label: "Active Subscribers",
trend: "up",
trendValue: "+124",
comparison: "this week",
progress: 2847,
progressMax: 3000,
progressLabel: "Goal: 3,000",
icon: "fas fa-users",
colorScheme: "purple",
accent: true
}
}
]
};
RSL.JSONLayout.renderLayout('#demo6-output', config);Build a complete analytics dashboard combining various KPI card styles.
const dashboardConfig = {
version: 2,
layoutId: "dashboard-kpi-demo",
breakpoints: { xs: 1, sm: 2, lg: 4 },
gap: "1.5rem",
items: [
// Row 1: Primary Metrics
{
content: {
type: "kpi",
value: 1248500,
prefix: "$",
label: "Total Revenue",
trend: "up",
trendValue: "+22%",
sparkline: [850, 920, 880, 1050, 980, 1120, 1080, 1248],
icon: "fas fa-dollar-sign",
colorScheme: "green",
glow: true
}
},
{
content: {
type: "kpi",
value: 45872,
label: "Active Users",
trend: "up",
trendValue: "+3,240",
sparkline: [38000, 40500, 41200, 42800, 43500, 44100, 44800, 45872],
icon: "fas fa-users",
colorScheme: "blue"
}
},
{
content: {
type: "kpi",
value: 8.4,
suffix: "%",
label: "Conversion Rate",
trend: "up",
trendValue: "+1.2%",
sparkline: [6.8, 7.1, 7.3, 7.5, 7.8, 8.0, 8.2, 8.4],
icon: "fas fa-percentage",
colorScheme: "purple"
}
},
{
content: {
type: "kpi",
value: 12847,
label: "Orders Today",
trend: "up",
trendValue: "+847",
comparison: "vs yesterday",
icon: "fas fa-shopping-bag",
colorScheme: "orange"
}
},
// Row 2: Secondary Metrics
{
content: {
type: "kpi",
value: 4.8,
suffix: "/5",
label: "Avg Rating",
icon: "fas fa-star",
colorScheme: "orange",
accent: true,
accentValue: true
}
},
{
content: {
type: "kpi",
value: 1.2,
suffix: "min",
label: "Avg Response Time",
trend: "down",
trendValue: "-0.3min",
icon: "fas fa-clock",
colorScheme: "teal"
}
},
{
content: {
type: "kpi",
value: 847,
label: "Support Tickets",
progress: 847,
progressMax: 1000,
progressLabel: "Capacity: 1000",
icon: "fas fa-ticket-alt",
colorScheme: "red"
}
},
{
content: {
type: "kpi",
value: 99.9,
suffix: "%",
label: "Uptime",
comparison: "30-day avg",
icon: "fas fa-server",
colorScheme: "green",
glow: true
}
}
]
};
RSL.JSONLayout.renderLayout('#demo7-output', dashboardConfig);Display skeleton loading states while data is being fetched.
// Show loading state
const loadingConfig = {
version: 2,
layoutId: "loading-kpi-demo",
breakpoints: { xs: 1, sm: 2, lg: 4 },
gap: "1.5rem",
items: [
{ content: { type: "kpi", loading: true, colorScheme: "blue" } },
{ content: { type: "kpi", loading: true, colorScheme: "green" } },
{ content: { type: "kpi", loading: true, colorScheme: "purple" } },
{ content: { type: "kpi", loading: true, colorScheme: "orange" } }
]
};
RSL.JSONLayout.renderLayout('#demo8-output', loadingConfig);
// Later, load actual data
setTimeout(() => {
const dataConfig = {
version: 2,
layoutId: "loading-kpi-demo",
breakpoints: { xs: 1, sm: 2, lg: 4 },
gap: "1.5rem",
items: [
{
content: {
type: "kpi",
value: 12500,
label: "Revenue",
prefix: "$",
colorScheme: "blue"
}
},
// ... more items
]
};
RSL.JSONLayout.renderLayout('#demo8-output', dataConfig);
}, 2000);