Back to cookbook
Recipe

Build a dashboard with GunjoUI

You need a metrics dashboard with stat cards, a chart area, and a recent-activity panel.

Recommended:
v0
Cursor

Prompt

Use the GunjoUI design system from @gunjo/ui. Reference the component manifest at https://gunjo.dev/api/specs/manifest.

Build a dashboard page with:
- A header with brand name on the left and a user avatar on the right
- A 4-column grid of Card components (CardHeader/CardTitle/CardDescription/CardContent) for KPIs: Revenue, Subscriptions, Sales, Active Now. Use `text-2xl font-bold` for the metric value.
- Below: a 7-column grid where a "Sales Analytics" Card spans 4 cols (chart placeholder inside) and a "Recent Sales" Card spans 3 cols (list of 5 user rows with Avatar + name + email + amount).

All colors must use semantic tokens (bg-primary, text-foreground, bg-muted etc.) — never hardcoded hex.

Expected output

A working dashboard page using @gunjo/ui Card, Avatar, and layout primitives, fully token-driven.

Components used

Card
Avatar
DashboardTemplate