Replit Agent prompt to build a dashboard UI
Dashboards generated from vague prompts tend to be static mockups with invented numbers. This spec makes Replit Agent wire every card, chart, and table to seeded database rows, with filters that update all three together, so you get a working analytics screen you can point at real data afterward.
Last updated
Build a dashboard UI on Replit for tracking {{resource}} activity, with data stored in {{database}}.
Layout: fixed sidebar with nav links (Overview, {{resource}}, Settings), top bar with a date range picker and a status dropdown, main area on a 12-column grid.
Overview content:
- Four stat cards: total {{resource}}, created this week, active count, and percent change versus the previous period. Every number must be computed by a query at request time, never hardcoded.
- A line chart of {{resource}} created per day across the selected range.
- A table of the most recent 50 rows: sortable columns, a text filter box, pagination at 10 rows per page.
The date range picker and status dropdown filter cards, chart, and table together from one place, not per widget.
Data: create the schema in {{database}} plus a seed script covering 60 days with uneven daily volume so the chart has visible shape.
States: filters matching zero rows show a message and a clear-filters button while cards render zeros. Fetch failures show an inline retry in the affected panel, never a blank page. Use loading skeletons, not spinners.
Styling: light theme, single accent color, system font stack, generous whitespace. Below tablet width the sidebar collapses to icons and cards stack in one column.
Verify: run the app, open the webview at desktop and phone widths, change a seed row and confirm the affected card changes, test column sorting, and list every component file you created.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a dashboard UI on Replit for tracking users activity, with data stored in PostgreSQL. Layout: fixed sidebar with nav links (Overview, users, Settings), top bar with a date range picker and a status dropdown, main area on a 12-column grid. Overview content: - Four stat cards: total users, created this week, active count, and percent change versus the previous period. Every number must be computed by a query at request time, never hardcoded. - A line chart of users created per day across the selected range. - A table of the most recent 50 rows: sortable columns, a text filter box, pagination at 10 rows per page. The date range picker and status dropdown filter cards, chart, and table together from one place, not per widget. Data: create the schema in PostgreSQL plus a seed script covering 60 days with uneven daily volume so the chart has visible shape. States: filters matching zero rows show a message and a clear-filters button while cards render zeros. Fetch failures show an inline retry in the affected panel, never a blank page. Use loading skeletons, not spinners. Styling: light theme, single accent color, system font stack, generous whitespace. Below tablet width the sidebar collapses to icons and cards stack in one column. Verify: run the app, open the webview at desktop and phone widths, change a seed row and confirm the affected card changes, test column sorting, and list every component file you created.
Same task in other tools
Questions about this prompt
Which chart library will Replit Agent pick?
Unspecified, it usually reaches for a common React charting package. If you care, name one in the styling section of the prompt, because swapping libraries later means rewriting every chart component rather than changing one line.
The stat cards look right but the numbers never change.
Hardcoded card values are the most common shortcut in generated dashboards. The prompt requires numbers computed by a query at request time; if you still see static values, reply "recompute each card from the database" and test by editing a seed row.
Can I point the dashboard at real data instead of the seeds?
Yes, once the seeded version passes the checks. Move your real connection string into a Repl secret rather than pasting it into chat, then send the agent your actual table and column names so it rewrites the card and chart queries against your schema. Keep the seed script around for demos.