Dashboard Analytics UI

Create a modern analytics dashboard with stat cards, charts, sidebar, and activity list.

A dark analytics dashboard with a labelled sidebar, a row of KPI cards with sparklines, a large area chart with a comparison line, and a recent activity feed.

Dashboards

designpromptkit.com/prompts/dashboard-analytics-ui

Live HTML Preview

Copy-ready prompt1921 chars

Build a premium analytics dashboard overview screen using semantic HTML and Tailwind CSS. Dark theme on a near-black canvas, thin translucent borders, one indigo accent (#6366F1 / #818CF8), and a monospace font for all numeric figures.

Layout (single screen, fills the viewport, no page scroll):

1. Left sidebar (~236px)
   - Brand: gradient logo tile + product name "Pulse" with an "Analytics" subtitle
   - Grouped nav with small uppercase group labels:
     - "Main": Overview (active), Analytics, Customers, Reports
     - "Workspace": Integrations, Settings
   - Each item has a line icon + label; the active item uses an accent tint, accent text and a subtle ring
   - Pinned to the bottom: a user card with avatar, name, plan ("Pro workspace") and a switch icon

2. Top bar
   - Left: page title "Overview" + a one-line subtitle
   - Right: a segmented range selector (24h / 7d / 30d, with 7d active), a search field, a notification bell button, and a circular avatar

3. Row of four KPI cards
   - Each card: metric label, a green or red delta pill, a large monospace value, and a small inline sparkline (line chart) tinted to match the delta
   - Use Revenue, Active users, Conversion, and Avg. session (last one trending down / red)

4. Main content row (fills remaining height)
   - Left (two-thirds): a "Revenue" panel showing a title, the headline figure, a legend (This week vs Last week), a smooth area chart with a soft gradient fill, a dashed comparison line for last week, a highlighted data point with a value tooltip, faint horizontal gridlines, and a weekday axis (Mon–Sun)
   - Right (one-third): a "Recent activity" feed with a "View all" link and five rows, each with a colored avatar, a name, a short action, and a timestamp

Use rounded cards on a subtle raised surface with 1px borders and consistent spacing. Make it responsive and accessible with proper landmarks, labels and heading order.

About this design prompt

Most dashboard prompts hand you four grey boxes and a chart. This one asks for the details that make a dashboard feel like a real product, such as a date range selector, sparklines inside the stat cards, and a comparison line on the main chart. The sidebar stays narrow so the data gets the room it needs. Reach for it when you want a starting point that already looks built rather than wireframed.

What this prompt builds

A narrow sidebar with a product name and grouped navigation
A date range selector sitting in the header
Four KPI cards, each with a value, a change indicator, and a sparkline
A large area chart with a gradient fill and a comparison line
A hover tooltip and labelled days along the axis
A recent activity feed with avatars and timestamps

Best used for

Internal tools and admin panels
Adding a reporting or analytics screen to an existing product
Showing a client what the data view could look like before you build it

Tips for better results

Tell the AI what your numbers actually mean. Real metric names beat Metric One and Metric Two every time.
Ask for the chart as inline SVG if you want it without pulling in a chart library.
Drop the activity feed on narrow screens. The KPI row and the chart carry the layout on their own.

Prompt details

Design type: Dashboards
Works with: Claude, Cursor, v0, Tailwind
Style: Clean, Professional, Data UI