Theme · Data Dashboard · Intermediate
CRM Dashboard
CRM dashboard = pipeline KPIs, stage-pilled deal rows, a quarter forecast bar, and an activity feed in one dark console.
Tips
Stage colours should sequence: amber negotiation, blue proposal. Money in monospace; the bar tells one story.
See also
Build a CRM dashboard for "Relay CRM", a revenue-operations console.
STYLE
- Dark canvas (#0b0f17), panels at #121826 with hairline borders
- Accents: teal (#00c2b3) for the brand dot and gains, blue (#0071e3) for charts; up = teal, down = soft red
- Monospace for metrics, clean sans for labels
LAYOUT
- Sidebar: brand "Relay" with a teal dot; nav Pipeline (on), Contacts, Forecast, Sequences, Reports; footer Settings
- Top bar: "Pipeline health" + "Updated 2 min ago"; pill "Last 30 days"
- Four KPIs: Open pipeline $2.4M +12.4%; Win rate 38% -8.1%; Avg deal $18.4k +0.4%; New leads 126 +3
- Left: "Deals closing this month" rows with stage pills - Northwind renewal (Negotiation, $84,000), Helio expansion (Proposal, $52,500), Beacon pilot (Discovery, $18,900); tall adds Cadence upsell (Proposal, $31,200)
- Right: "Quarter forecast" - Closed $187k of $500k with a teal-blue progress bar; tall adds Recent activity (A. Rivera moved Helio to Proposal; K. Osei logged a call with Beacon)
COMPONENTS
- Sidebar: brand with teal dot, five nav items, footer
- Top bar: title, updated-time, period pill
- Four KPI cards with deltas
- Deal rows with stage pills; forecast card with progress bar; tall adds activity feed
INTERACTION
- Stage pills are colour-coded by stage; the forecast bar fills to quota; nav items highlight on hover.
TECHNICAL
- React, Tailwind CSS, Recharts or visx for charts, shadcn/ui