Bolt prompt to build a dashboard UI
Point Bolt at this spec and it generates a working dashboard: sidebar shell, stat cards, charts, and a filterable table, all fed by a deterministic mock data module. That mock layer is deliberate, since the preview renders populated charts immediately and you can swap in a real API later without rewriting components.
Last updated
Build a responsive admin dashboard UI for monitoring {{resource}} activity. Use React with TypeScript and Tailwind.
Layout: a collapsible sidebar with navigation groups (Overview, {{resource}}, Reports, Settings) and active-route highlighting, plus a top bar with search, a date-range selector, and a user menu.
Screens:
1. Overview: four stat cards (total records, active this period, change versus the previous period computed from the mock data, and open alerts), a line chart of the last 30 days, a bar chart grouped by category, and a recent activity feed.
2. {{resource}} table: sortable columns, a text filter, a status dropdown, pagination, and a detail drawer that opens on row click.
3. Settings: a simple preferences form persisted to localStorage.
Data: create src/data/mock.ts, a module that generates records with a seeded deterministic generator so charts and tables look identical on every reload. No backend calls; components read through a thin data-access layer I can later point at a real API.
States: skeleton loaders on first paint, an empty state with a clear-filters action when nothing matches, and an error boundary around each chart so one failure cannot blank the whole page.
Styling: neutral palette with a single accent color, an 8px spacing scale, cards with subtle borders instead of heavy shadows. Everything must work down to 375px wide, with the sidebar collapsing to a hamburger menu on mobile.
When you are done, check the preview at desktop and mobile widths and fix any horizontal overflow before declaring the task finished.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a responsive admin dashboard UI for monitoring users activity. Use React with TypeScript and Tailwind. Layout: a collapsible sidebar with navigation groups (Overview, users, Reports, Settings) and active-route highlighting, plus a top bar with search, a date-range selector, and a user menu. Screens: 1. Overview: four stat cards (total records, active this period, change versus the previous period computed from the mock data, and open alerts), a line chart of the last 30 days, a bar chart grouped by category, and a recent activity feed. 2. users table: sortable columns, a text filter, a status dropdown, pagination, and a detail drawer that opens on row click. 3. Settings: a simple preferences form persisted to localStorage. Data: create src/data/mock.ts, a module that generates records with a seeded deterministic generator so charts and tables look identical on every reload. No backend calls; components read through a thin data-access layer I can later point at a real API. States: skeleton loaders on first paint, an empty state with a clear-filters action when nothing matches, and an error boundary around each chart so one failure cannot blank the whole page. Styling: neutral palette with a single accent color, an 8px spacing scale, cards with subtle borders instead of heavy shadows. Everything must work down to 375px wide, with the sidebar collapsing to a hamburger menu on mobile. When you are done, check the preview at desktop and mobile widths and fix any horizontal overflow before declaring the task finished.
Same task in other tools
Questions about this prompt
Which chart library will Bolt reach for?
It varies, so name one if you care. Recharts and Chart.js both install cleanly in the browser runtime; add "use Recharts" to the spec and the generated components will import it directly instead of hand-rolling SVG.
My charts render as empty boxes in the preview. What happened?
The usual cause is a chart inside a container with no explicit height, so the responsive wrapper computes zero. Reply with the component name and ask for a fixed height on the chart wrapper; pasting the browser console warning speeds this up.
How do I wire this dashboard to real data afterwards?
Keep the data-access layer and replace the mock module behind it, one endpoint at a time. Something like "replace getStats with a fetch to /api/stats, change nothing else" keeps diffs reviewable while the rest of the dashboard keeps rendering from mocks.