Lovable Dashboard Pro
Purpose
Generate professional-grade dashboard UIs in Lovable for analytics, admin panels, CRM, monitoring, or any data-heavy application. Produces proper data component hierarchy, interactive chart elements, efficient navigation, and responsive layouts that go beyond basic table-and-sidebar defaults.
Platform context: Lovable generates React + TypeScript + Tailwind CSS + shadcn/ui apps. Charts should use Recharts (available in Lovable). Data tables should use shadcn's Table or TanStack Table. Icons from Lucide React.
Inputs
| Parameter |
Required |
Values |
Default |
domain |
yes |
marketing_analytics, financial_reporting, project_management, devops_monitoring, crm, healthcare, sales, hr |
— |
dashboard_type |
no |
overview, analytical, operational, detail |
overview |
density |
no |
compact, balanced, spacious |
balanced |
theme |
no |
light-professional, dark-operational, high-contrast |
light-professional |
Workflow
1. Classify Dashboard Type
Determine layout pattern based on dashboard_type:
| Type |
Layout |
Purpose |
| overview |
KPI cards (top) → primary charts (2-col middle) → data table (bottom) |
Quick status at a glance |
| analytical |
Filter bar (top) → bento chart grid (3-col) → drill-down panel |
Data exploration, comparison |
| operational |
Status banner (top) → real-time metrics (3-col) → timeline + log |
Live monitoring |
| detail |
Entity header → tabbed content → action panel |
Deep dive into single record |
2. Build Layout Architecture
Sidebar Navigation:
- Collapsible: 240px expanded (icon + label), 64px collapsed (icon only).
- Toggle button at bottom. Sections grouped with subtle dividers.
- Active item: primary color background or left border accent.
Top Bar:
- Height 56px. Breadcrumb trail (left), search with ⌘K hint (center), notification bell + avatar (right).
- On scroll:
backdrop-filter: blur(10px), subtle bottom border.
Content Grid (CSS Grid, responsive):
- Desktop (1280px+): Full sidebar + multi-column grid.
- Tablet (768–1279px): Collapsed sidebar + 2-column grid.
- Mobile (<768px): Hidden sidebar (hamburger) + single column.
Widget Containers:
- Card with theme-appropriate
border-radius, subtle 1px border, optional header (title + action menu).
- Padding: 16px (compact), 20px (balanced), 28px (spacious).
3. Design Data Components
KPI Cards:
- Large primary number (2rem+, tabular numerals / monospace).
- Trend indicator: up/down arrow, green for positive, red for negative.
- Percentage change, sparkline (40px height), comparison period label.
- Hover: lifts 2px with tooltip showing detailed breakdown.
Charts (Recharts):
- Clean axis labels (0.75rem, muted color). Grid lines at 0.08 opacity.
- Data points with 6px radius on line charts. Smooth 600ms entrance animation.
- Interactive tooltip on hover. Crosshair guide lines. Maximum 5 data series colors.
Data Tables (shadcn Table):
- Sortable column headers with arrow indicators. Alternating row backgrounds.
- Row hover highlight. Inline action buttons on hover. Pagination with page size selector.
Status Indicators:
- Green (#22c55e), yellow (#eab308), red (#ef4444). Only red gets subtle pulse animation.
- Always include text label alongside color dot (accessibility).
Activity/Event Feed:
- Monospace timestamp + event icon + description. New items fade in from top.
- Scrollable container with max-height.
4. Inject Dashboard Interactions
Date Range Picker:
- Preset buttons: Today, 7d, 30d, 90d, YTD, Custom.
- Custom opens calendar popover. Selection triggers skeleton loading on widgets.
Filter System:
- Filter button opens dropdown panel. Active filters as removable chips.
- Chip removal animates out (200ms). Filters trigger skeleton loading (300ms min).
Chart Interactions:
- Click bar/pie segment to filter related widgets (300ms cross-fade).
- Hover tooltip with 150ms delay.
Widget Controls:
- Three-dot menu: expand full-screen (400ms ease-out), export, refresh, configure.
- Refresh icon rotates 360° over 600ms.
Global Refresh:
- Button in top bar. Icon rotates. All widgets show skeleton loading. Data fades in (300ms).
5. Apply Typography and Color
Numeric values: Tabular numerals — use font-variant-numeric: tabular-nums or monospace font (Geist Mono, JetBrains Mono).
Section labels: 0.75rem, uppercase, letter-spacing: 0.05em, muted color.
Chart color palettes:
| Theme |
Colors |
| light-professional |
#3b82f6, #8b5cf6, #06b6d4, #f59e0b, #10b981 |
| dark-operational |
#60a5fa, #a78bfa, #22d3ee, #fbbf24, #34d399 |
| high-contrast |
#2563eb, #7c3aed, #0891b2, #d97706, #059669 |
Background hierarchy: Sidebar slightly darker → content area → widget cards slightly lighter. Creates depth without heavy shadows.
6. Apply Density Settings
| Setting |
Widget Padding |
Row Height |
Font Adjustment |
Widget Gap |
| compact |
12px |
36px |
-1 step |
8px |
| balanced |
20px |
44px |
standard |
16px |
| spacious |
28px |
52px |
+1 step |
24px |
Output Format
Complete dashboard layout with sidebar, top bar, and content area populated with domain-appropriate data components. All widgets include interactive states, loading states, and responsive behavior. Uses Recharts for charts, shadcn Table for data tables, Lucide icons, and Tailwind CSS.
Guardrails
- Never use more than 5 colors in a single chart. Group smaller categories into "Other."
- All numeric data must use tabular/monospace numerals.
- Status colors must be consistent: green=success, yellow=warning, red=critical, blue=info.
- Tables must include sortable headers and row hover states.
- Loading states must use skeleton placeholders matching content shape. Never use centered spinners.
- Charts must have
aria-label describing the data trend.
- Never display raw timestamps — format as "2 hours ago" or "Mar 15, 2025."
- Dashboard must work at 1024px minimum without horizontal scroll.
- Use Recharts for all chart components. Do not introduce Chart.js, D3, or other chart libraries.
Failure Handling
| Problem |
Follow-up Prompt |
| Flat KPI cards |
"Restructure KPI cards: large metric (2rem, tabular font), trend arrow (green/red), percentage change, sparkline (40px height), comparison text. Hover tooltip with breakdown." |
| Non-interactive charts |
"Add Recharts tooltips on hover (150ms delay). Add crosshair guide lines. Add 600ms ease-out entrance animation. Make segments clickable to filter." |
| Single column layout |
"Use CSS Grid: top row 4-col KPIs, middle 2-col charts (60/40), bottom full-width table. Collapsible sidebar (240px/64px)." |
| Missing loading states |
"Add skeleton placeholders matching widget shapes. Rectangular for charts, row-shaped for tables, card-shaped for KPIs. Min 300ms display." |
| Sidebar not collapsible |
"Make sidebar collapsible: 240px expanded with icon+label, 64px collapsed with icon only. Toggle button at bottom. Persist state." |
Examples
Example 1: Marketing Analytics Overview
Input: domain=marketing_analytics, dashboard_type=overview, density=balanced, theme=light-professional
Prompt to Lovable:
Build a marketing analytics dashboard:
LAYOUT: Left sidebar (collapsible 240px/64px) with nav items: Overview, Campaigns, Audiences, Content, Reports, Settings. Top bar with breadcrumbs, search input (Cmd+K hint), notification bell, avatar. Main content in CSS Grid.
TOP ROW (4 KPI cards): Total Visitors (sparkline), Conversion Rate (trend arrow), Revenue (comparison to last period), Active Campaigns (status count). Numbers in tabular-nums monospace. Cards lift on hover.
MIDDLE (2-column, 60/40): Left — line chart showing traffic over 30 days with 3 series (organic, paid, referral) using Recharts. Right — donut chart of traffic sources. Interactive tooltips on hover.
BOTTOM (full-width): Campaign performance table with columns: Name, Status (color dot + label), Impressions, Clicks, CTR, Spend, ROAS. Sortable headers, row hover highlight, pagination.
Date range picker at top: Today, 7d, 30d, 90d, Custom. Changing triggers skeleton loading.
Colors: #3b82f6, #8b5cf6, #06b6d4, #f59e0b, #10b981 for chart series.
Example 2: DevOps Monitoring Operational
Input: domain=devops_monitoring, dashboard_type=operational, density=compact, theme=dark-operational
Prompt to Lovable:
Build a DevOps monitoring dashboard with dark theme:
LAYOUT: Dark background (slate-950). Collapsed sidebar (64px icons). Top bar with system status indicator and global refresh.
TOP BANNER: System health — green/yellow/red status with uptime percentage. Only red gets pulse animation.
METRICS ROW (3 cards): CPU Usage (gauge chart), Memory Usage (bar), Active Connections (counter with sparkline). Compact 12px padding, tabular monospace numbers.
MAIN (2-column split): Left — time-series chart (request latency p50/p95/p99 over 1 hour, auto-refreshing). Right — event log (scrollable, monospace timestamps, color-coded severity icons, new items fade in from top).
All widgets: 8px gaps, dark card backgrounds (slate-900), subtle borders (slate-800). Chart colors: #60a5fa, #a78bfa, #22d3ee, #fbbf24, #34d399.
Security & Privacy
This skill generates text prompts only. It does not access external endpoints, transmit data, or execute code. All output is prompt text intended for the Lovable.dev platform.
Trust Statement
This skill contains no executable scripts. It produces Lovable-compatible dashboard generation prompts. It does not access the filesystem, network, or any external service.
1---2name: lovable-dashboard-pro3description: Generate data-rich, interactive analytics dashboards in Lovable with advanced chart layouts, real-time patterns, KPI cards, and intuitive navigation.4---5
6# Lovable Dashboard Pro
7
8## Purpose
9
10Generate professional-grade dashboard UIs in Lovable for analytics, admin panels, CRM, monitoring, or any data-heavy application. Produces proper data component hierarchy, interactive chart elements, efficient navigation, and responsive layouts that go beyond basic table-and-sidebar defaults.
11
12> **Platform context**: Lovable generates React + TypeScript + Tailwind CSS + shadcn/ui apps. Charts should use Recharts (available in Lovable). Data tables should use shadcn's Table or TanStack Table. Icons from Lucide React.
13
14## Inputs
15
16| Parameter | Required | Values | Default |
17|------------------|----------|--------------------------------------------------------------------------------------------|---------------------|
18| `domain` | yes | marketing_analytics, financial_reporting, project_management, devops_monitoring, crm, healthcare, sales, hr | — |
19| `dashboard_type` | no | overview, analytical, operational, detail | overview |
20| `density` | no | compact, balanced, spacious | balanced |
21| `theme` | no | light-professional, dark-operational, high-contrast | light-professional |
22
23## Workflow
24
25### 1. Classify Dashboard Type
26
27Determine layout pattern based on `dashboard_type`:
28
29| Type | Layout | Purpose |
30|-------------|------------------------------------------------------------------------|------------------------------|
31| overview | KPI cards (top) → primary charts (2-col middle) → data table (bottom) | Quick status at a glance |
32| analytical | Filter bar (top) → bento chart grid (3-col) → drill-down panel | Data exploration, comparison |
33| operational | Status banner (top) → real-time metrics (3-col) → timeline + log | Live monitoring |
34| detail | Entity header → tabbed content → action panel | Deep dive into single record |
35
36### 2. Build Layout Architecture
37
38**Sidebar Navigation**:
39- Collapsible: 240px expanded (icon + label), 64px collapsed (icon only).
40- Toggle button at bottom. Sections grouped with subtle dividers.
41- Active item: primary color background or left border accent.
42
43**Top Bar**:
44- Height 56px. Breadcrumb trail (left), search with ⌘K hint (center), notification bell + avatar (right).
45- On scroll: `backdrop-filter: blur(10px)`, subtle bottom border.
46
47**Content Grid** (CSS Grid, responsive):
48- Desktop (1280px+): Full sidebar + multi-column grid.
49- Tablet (768–1279px): Collapsed sidebar + 2-column grid.
50- Mobile (<768px): Hidden sidebar (hamburger) + single column.
51
52**Widget Containers**:
53- Card with theme-appropriate `border-radius`, subtle 1px border, optional header (title + action menu).
54- Padding: 16px (compact), 20px (balanced), 28px (spacious).
55
56### 3. Design Data Components
57
58**KPI Cards**:
59- Large primary number (2rem+, tabular numerals / monospace).
60- Trend indicator: up/down arrow, green for positive, red for negative.
61- Percentage change, sparkline (40px height), comparison period label.
62- Hover: lifts 2px with tooltip showing detailed breakdown.
63
64**Charts** (Recharts):
65- Clean axis labels (0.75rem, muted color). Grid lines at 0.08 opacity.
66- Data points with 6px radius on line charts. Smooth 600ms entrance animation.
67- Interactive tooltip on hover. Crosshair guide lines. Maximum 5 data series colors.
68
69**Data Tables** (shadcn Table):
70- Sortable column headers with arrow indicators. Alternating row backgrounds.
71- Row hover highlight. Inline action buttons on hover. Pagination with page size selector.
72
73**Status Indicators**:
74- Green (#22c55e), yellow (#eab308), red (#ef4444). Only red gets subtle pulse animation.
75- Always include text label alongside color dot (accessibility).
76
77**Activity/Event Feed**:
78- Monospace timestamp + event icon + description. New items fade in from top.
79- Scrollable container with max-height.
80
81### 4. Inject Dashboard Interactions
82
83**Date Range Picker**:
84- Preset buttons: Today, 7d, 30d, 90d, YTD, Custom.
85- Custom opens calendar popover. Selection triggers skeleton loading on widgets.
86
87**Filter System**:
88- Filter button opens dropdown panel. Active filters as removable chips.
89- Chip removal animates out (200ms). Filters trigger skeleton loading (300ms min).
90
91**Chart Interactions**:
92- Click bar/pie segment to filter related widgets (300ms cross-fade).
93- Hover tooltip with 150ms delay.
94
95**Widget Controls**:
96- Three-dot menu: expand full-screen (400ms ease-out), export, refresh, configure.
97- Refresh icon rotates 360° over 600ms.
98
99**Global Refresh**:
100- Button in top bar. Icon rotates. All widgets show skeleton loading. Data fades in (300ms).
101
102### 5. Apply Typography and Color
103
104**Numeric values**: Tabular numerals — use `font-variant-numeric: tabular-nums` or monospace font (Geist Mono, JetBrains Mono).
105
106**Section labels**: 0.75rem, uppercase, `letter-spacing: 0.05em`, muted color.
107
108**Chart color palettes**:
109
110| Theme | Colors |
111|-------------------|-----------------------------------------------|
112| light-professional | #3b82f6, #8b5cf6, #06b6d4, #f59e0b, #10b981 |
113| dark-operational | #60a5fa, #a78bfa, #22d3ee, #fbbf24, #34d399 |
114| high-contrast | #2563eb, #7c3aed, #0891b2, #d97706, #059669 |
115
116**Background hierarchy**: Sidebar slightly darker → content area → widget cards slightly lighter. Creates depth without heavy shadows.
117
118### 6. Apply Density Settings
119
120| Setting | Widget Padding | Row Height | Font Adjustment | Widget Gap |
121|----------|---------------|------------|-----------------|------------|
122| compact | 12px | 36px | -1 step | 8px |
123| balanced | 20px | 44px | standard | 16px |
124| spacious | 28px | 52px | +1 step | 24px |
125
126## Output Format
127
128Complete dashboard layout with sidebar, top bar, and content area populated with domain-appropriate data components. All widgets include interactive states, loading states, and responsive behavior. Uses Recharts for charts, shadcn Table for data tables, Lucide icons, and Tailwind CSS.
129
130## Guardrails
131
132- Never use more than 5 colors in a single chart. Group smaller categories into "Other."
133- All numeric data must use tabular/monospace numerals.
134- Status colors must be consistent: green=success, yellow=warning, red=critical, blue=info.
135- Tables must include sortable headers and row hover states.
136- Loading states must use skeleton placeholders matching content shape. Never use centered spinners.
137- Charts must have `aria-label` describing the data trend.
138- Never display raw timestamps — format as "2 hours ago" or "Mar 15, 2025."
139- Dashboard must work at 1024px minimum without horizontal scroll.
140- Use Recharts for all chart components. Do not introduce Chart.js, D3, or other chart libraries.
141
142## Failure Handling
143
144| Problem | Follow-up Prompt |
145|---------|-----------------|
146| Flat KPI cards | "Restructure KPI cards: large metric (2rem, tabular font), trend arrow (green/red), percentage change, sparkline (40px height), comparison text. Hover tooltip with breakdown." |
147| Non-interactive charts | "Add Recharts tooltips on hover (150ms delay). Add crosshair guide lines. Add 600ms ease-out entrance animation. Make segments clickable to filter." |
148| Single column layout | "Use CSS Grid: top row 4-col KPIs, middle 2-col charts (60/40), bottom full-width table. Collapsible sidebar (240px/64px)." |
149| Missing loading states | "Add skeleton placeholders matching widget shapes. Rectangular for charts, row-shaped for tables, card-shaped for KPIs. Min 300ms display." |
150| Sidebar not collapsible | "Make sidebar collapsible: 240px expanded with icon+label, 64px collapsed with icon only. Toggle button at bottom. Persist state." |
151
152## Examples
153
154### Example 1: Marketing Analytics Overview
155
156**Input**: `domain=marketing_analytics`, `dashboard_type=overview`, `density=balanced`, `theme=light-professional`
157
158**Prompt to Lovable**:
159```
160Build a marketing analytics dashboard:
161
162LAYOUT: Left sidebar (collapsible 240px/64px) with nav items: Overview, Campaigns, Audiences, Content, Reports, Settings. Top bar with breadcrumbs, search input (Cmd+K hint), notification bell, avatar. Main content in CSS Grid.
163
164TOP ROW (4 KPI cards): Total Visitors (sparkline), Conversion Rate (trend arrow), Revenue (comparison to last period), Active Campaigns (status count). Numbers in tabular-nums monospace. Cards lift on hover.
165
166MIDDLE (2-column, 60/40): Left — line chart showing traffic over 30 days with 3 series (organic, paid, referral) using Recharts. Right — donut chart of traffic sources. Interactive tooltips on hover.
167
168BOTTOM (full-width): Campaign performance table with columns: Name, Status (color dot + label), Impressions, Clicks, CTR, Spend, ROAS. Sortable headers, row hover highlight, pagination.
169
170Date range picker at top: Today, 7d, 30d, 90d, Custom. Changing triggers skeleton loading.
171
172Colors: #3b82f6, #8b5cf6, #06b6d4, #f59e0b, #10b981 for chart series.
173```
174
175### Example 2: DevOps Monitoring Operational
176
177**Input**: `domain=devops_monitoring`, `dashboard_type=operational`, `density=compact`, `theme=dark-operational`
178
179**Prompt to Lovable**:
180```
181Build a DevOps monitoring dashboard with dark theme:
182
183LAYOUT: Dark background (slate-950). Collapsed sidebar (64px icons). Top bar with system status indicator and global refresh.
184
185TOP BANNER: System health — green/yellow/red status with uptime percentage. Only red gets pulse animation.
186
187METRICS ROW (3 cards): CPU Usage (gauge chart), Memory Usage (bar), Active Connections (counter with sparkline). Compact 12px padding, tabular monospace numbers.
188
189MAIN (2-column split): Left — time-series chart (request latency p50/p95/p99 over 1 hour, auto-refreshing). Right — event log (scrollable, monospace timestamps, color-coded severity icons, new items fade in from top).
190
191All widgets: 8px gaps, dark card backgrounds (slate-900), subtle borders (slate-800). Chart colors: #60a5fa, #a78bfa, #22d3ee, #fbbf24, #34d399.
192```
193
194## Security & Privacy
195
196This skill generates text prompts only. It does not access external endpoints, transmit data, or execute code. All output is prompt text intended for the Lovable.dev platform.
197
198## Trust Statement
199
200This skill contains no executable scripts. It produces Lovable-compatible dashboard generation prompts. It does not access the filesystem, network, or any external service.
majiayu000