SaaS dashboard design - v0 by Vercel

Dashboard page for SaaS analytics. Light theme (#F6F5F1 bg, white cards, #4F46E5 indigo accent). Every metric has a sparkline trend. Layout: 1) Hero score gauge (47/100) with 30-day sparkline and +5 delta badge. 2) Four KPI cards in a row: each with large number, sparkline, colored delta. Values: 35.2%, 3.4, 47, 4/5. 3) Activity feed (3 items with timestamps). 4) Two columns: line chart (4 series over 30 days using recharts) and quote cards (3 items). 5) Two columns: recommendation cards (3 with priority badges) and horizontal bar chart (4 categories). Use recharts, Tailwind, React. No emoji.

Show full message

64d ago

Now let me build the full dashboard with all sections.

Now I'll build all the components and update the theme simultaneously.

Now let me write all the dashboard components:

Now write the main page:

Now update the dark mode CSS block to not conflict with our light-only design, and also patch the @theme inline so the new tokens map correctly:

The CSS looks good. Now let me also add the --color-indigo custom token to the @theme inline block so we can use it directly if needed, and also ensure the foreground and card-foreground tokens are set:

The dashboard is complete. Here's a summary of everything built:

/app/globals.css — Updated with a full light-theme token system: #F6F5F1 background, white cards, #4F46E5 indigo accent, plus positive/negative delta color tokens.
/lib/dashboard-data.ts — All deterministic, seeded mock data (sparklines, activities, KPIs, quotes, recommendations, bar/line chart series) so SSR and CSR render identically.
5 layout sections across 8 component files: a gauge+progress hero card, four KPI cards with colored sparklines and delta badges, a 3-item activity feed, a 4-series Recharts line chart paired with testimonial quote cards, and recommendation cards with priority badges alongside a horizontal bar chart — all responsive via Tailwind grid breakpoints.

64d ago

Show full message

64d ago

Now let me build the full dashboard with all sections.

Now I'll build all the components and update the theme simultaneously.

Now let me write all the dashboard components:

Now write the main page:

Now update the dark mode CSS block to not conflict with our light-only design, and also patch the @theme inline so the new tokens map correctly:

The dashboard is complete. Here's a summary of everything built:

/app/globals.css — Updated with a full light-theme token system: #F6F5F1 background, white cards, #4F46E5 indigo accent, plus positive/negative delta color tokens.
/lib/dashboard-data.ts — All deterministic, seeded mock data (sparklines, activities, KPIs, quotes, recommendations, bar/line chart series) so SSR and CSR render identically.
5 layout sections across 8 component files: a gauge+progress hero card, four KPI cards with colored sparklines and delta badges, a 3-item activity feed, a 4-series Recharts line chart paired with testimonial quote cards, and recommendation cards with priority badges alongside a horizontal bar chart — all responsive via Tailwind grid breakpoints.