Lovable prompt to build a dashboard UI
This prompt gives Lovable a full layout spec instead of the word dashboard, which is what stops it from producing a generic template. The result is an overview page with stat cards, two Recharts visualizations, and a sortable table, all reading from a seeded Supabase table so the date filter actually changes what you see.
Last updated
Build an analytics dashboard for an app that tracks {{resource}}.
Layout: fixed left sidebar (Overview, {{resource}}, Reports, Settings), a top bar with a date range picker (presets for last 7 days, last 30 days, and custom) and a user menu. Main area on a 12-column grid.
Overview page:
- Four stat cards: total {{resource}}, count added this period, percent change versus the prior period with a signed value, and a fourth card labeled Placeholder that I will define later.
- A line chart of daily counts across the selected range and a bar chart of the top five categories, both using Recharts inside responsive containers with explicit heights.
- A table of the 20 most recent records: sortable columns, a status badge, a row action menu, and pagination beyond 20 rows.
Data: create a Supabase table and seed roughly 90 days of plausible demo rows so every card and chart renders from real queries, not hardcoded arrays. Changing the date range must refetch and update every widget on the page.
States: skeleton loaders while queries run, an empty state with one line of explanation when the range has no data, and an inline retry button on query failure.
Styling: neutral grays with a single accent color, generous whitespace, no gradients. Works at 1280px wide; on mobile the grid collapses to one column and the sidebar becomes a drawer.
Skip auth for now. When finished, list which component reads from which table and column so I can point them at production data later.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build an analytics dashboard for an app that tracks users. Layout: fixed left sidebar (Overview, users, Reports, Settings), a top bar with a date range picker (presets for last 7 days, last 30 days, and custom) and a user menu. Main area on a 12-column grid. Overview page: - Four stat cards: total users, count added this period, percent change versus the prior period with a signed value, and a fourth card labeled Placeholder that I will define later. - A line chart of daily counts across the selected range and a bar chart of the top five categories, both using Recharts inside responsive containers with explicit heights. - A table of the 20 most recent records: sortable columns, a status badge, a row action menu, and pagination beyond 20 rows. Data: create a Supabase table and seed roughly 90 days of plausible demo rows so every card and chart renders from real queries, not hardcoded arrays. Changing the date range must refetch and update every widget on the page. States: skeleton loaders while queries run, an empty state with one line of explanation when the range has no data, and an inline retry button on query failure. Styling: neutral grays with a single accent color, generous whitespace, no gradients. Works at 1280px wide; on mobile the grid collapses to one column and the sidebar becomes a drawer. Skip auth for now. When finished, list which component reads from which table and column so I can point them at production data later.
Same task in other tools
Questions about this prompt
Why insist on seeded data instead of sample arrays?
Left alone, Lovable often hardcodes chart data inside components, so the date picker changes nothing. Seeding a real table forces every widget through an actual query path, which is the part you need to trust before connecting production data.
How do I hook up my real data afterwards?
Ask Lovable for the component-to-table mapping the prompt requests, then point those queries at your tables or import your rows into the seeded schema. Renaming columns in one migration is usually less work than rewriting the queries.
My charts render zero height or overflow on phones. What happened?
Recharts needs an explicitly sized container, and generated layouts sometimes drop the height when the grid collapses. Tell Lovable which chart clips, at which viewport width, and that the responsive container needs a fixed height at that breakpoint.