Cursor prompt to build a dashboard UI
Dashboards fail in the states nobody designs: loading, error, empty. This prompt gets Cursor to build stat cards, a chart, and an activity table where every widget fetches independently and renders its own skeleton, retry, and empty copy, all with whatever component and styling stack your repo already uses instead of importing a new one.
Last updated
Build a dashboard page in this codebase using the existing component library and styling approach; check for Tailwind, CSS modules, or styled-components before writing anything. Lay out a header with a date range picker, four stat cards showing {{resource}} metrics with a delta versus the previous period, one line chart, and a recent activity table with client-side sorting. Fetch data through a single typed hook per widget so each region renders independently with its own skeleton state, an error state with a retry button, and an empty state with real copy rather than a blank div. Collapse the grid to one column below 768px. Do not add a charting library if one is already installed. When done, start the dev server, verify there are no console errors, and list the components you added.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a dashboard page in this codebase using the existing component library and styling approach; check for Tailwind, CSS modules, or styled-components before writing anything. Lay out a header with a date range picker, four stat cards showing users metrics with a delta versus the previous period, one line chart, and a recent activity table with client-side sorting. Fetch data through a single typed hook per widget so each region renders independently with its own skeleton state, an error state with a retry button, and an empty state with real copy rather than a blank div. Collapse the grid to one column below 768px. Do not add a charting library if one is already installed. When done, start the dev server, verify there are no console errors, and list the components you added.
Same task in other tools
Questions about this prompt
Will Cursor match my existing design system?
The prompt's first instruction is to check the styling stack before writing anything, which works when your components are discoverable. Attach your design system folder or a representative page with @ so the agent copies real patterns instead of inventing parallel ones.
What data does the dashboard fetch during development?
The prompt specifies a typed hook per widget, so point those hooks at real endpoints if they exist, or ask the agent to add fixture data behind the same interface. Keeping fixtures behind the hook boundary means swapping in the live API later touches one file per widget.
The chart renders but the page pulls in a second charting library. Why?
The agent likely missed the installed one because it was not in the attached context. The prompt forbids duplicates, so reject the change, name the existing library explicitly, and it will rebuild the chart with what you already have.