What this prompt does
This prompt casts the model as a senior frontend engineer who ships SaaS dashboards and asks for a concrete component tree with real Tailwind classes, not pseudocode. It specifies an app shell with a collapsible sidebar and a top nav, a bento-grid main area that mixes KPI cards, trend charts, and a data table without ragged rows, and — importantly — loading, empty, and error states for every panel. Dark mode is the default with a light-mode token map.
The variables shape the layout to your product. [product] and [primary_kpis] decide which KPI cards appear and what each shows — value, delta versus last period, and a sparkline. [framework] and [styling] set the actual output: Next.js with Tailwind v4 and shadcn/ui produces a different component tree than another pairing. Because the prompt asks for KPI cards built directly from [primary_kpis], the dashboard reflects your real metrics rather than placeholder tiles.
When to use it
- You are building a SaaS admin dashboard and want a real component tree to start from
- You need a bento grid that holds cards, charts, and a table without ragged rows
- You want KPI cards with value, period-over-period delta, and a sparkline
- You need loading, empty, and error states designed for each panel, not bolted on later
- You want dark mode by default plus a light-mode token map
- You care about keyboard nav, focus rings, and ARIA on the charts and table
Example output
The model returns a component tree with real Tailwind classes for your framework: an app shell with a collapsible left sidebar, a top nav with global search and a profile menu, responsive breakpoints, and a bento-grid main area. Each KPI card shows a value, a delta against the last period, and a sparkline, and every panel includes loading, empty, and error states. Accessibility hooks — keyboard nav, focus rings, ARIA on charts and the table — are wired in.
Pro tips
- List your real metrics in
[primary_kpis]; the cards are generated from them, so vague KPIs produce vague tiles - Match
[framework]and[styling]to your stack so the Tailwind classes and component conventions are usable as-is - Design the empty and loading states (deliverable 4) first — a fresh account sees those, and one card with no empty state can collapse the bento layout
- Describe
[product]so the dashboard's context and labels fit, not a generic analytics shell - Keep the ARIA and keyboard requirements; charts and tables are where accessibility is most often dropped
- Iterate by asking for one panel at a time if the full tree is large, so each piece stays detailed
