Prompt pack · 25 prompts

Dashboards & Data Pack

Build premium dashboards and data interfaces faster with AI.

$27One-time purchase · checkout on Gumroad

Instant download after checkout. All sales are final — every prompt is listed below.

Dashboards & Data Pack cover
25 copy-paste promptsOne HTML file per promptWorks with Claude, ChatGPT, Gemini, and CursorPrompt customizer includedInstant download

What's inside

All 25 prompts in the pack

Every one of these is in the download as a full, copy-paste prompt.

  1. 01

    Neumorphic Analytics Dashboard with Real-Time Charts

    A premium neumorphic analytics dashboard with soft-raised card containers housing real-time Canvas API charts that animate smoothly as WebSocket-driven data streams in live.

    Best forSaaS analytics, admin panels, executive dashboards

    • Neumorphic
    • Canvas charts
    • WebSocket data
  2. 02

    Interactive Data Table with Sorting and Pagination

    A polished interactive data table with clickable column headers that toggle sort direction, plus dynamic pagination controls with page numbers and next/prev arrows that update rows without a full page reload.

    Best forData browsers, admin consoles, record management

    • Sortable headers
    • Pagination
    • Async rows
  3. 03

    Minimalist KPI Card Grid with Trend Indicators

    A clean KPI card grid with animated trend arrows that slide in when values update, arranged in a responsive CSS grid with consistent aspect-ratio sizing across every viewport.

    Best forExecutive summaries, overview panels, metric snapshots

    • CSS grid
    • Animated arrows
    • Aspect-ratio cards
  4. 04

    Activity Feed Timeline with Expandable Details

    A vertical activity feed timeline with collapsible detail sections and a gradient connector line that animates its length on scroll via Intersection Observer for a polished reveal effect.

    Best forAudit logs, event streams, team activity panels

    • Vertical timeline
    • Collapsible
    • Scroll-animated
  5. 05

    Drag-and-Drop Widget Dashboard with Custom Layouts

    A fully drag-and-drop widget dashboard where users rearrange panels with grab cursors, layouts persist in localStorage across sessions, and widgets animate smoothly into their new positions.

    Best forCustomizable portals, user-configurable panels, home screens

    • Drag & drop
    • localStorage
    • Smooth reposition
  6. 06

    Financial Portfolio Dashboard with Asset Allocation Pie Chart

    An interactive financial portfolio dashboard with an SVG pie chart showing asset allocation, fade-in tooltips on slice hover, and percentage labels overlaid directly on each segment for instant readability.

    Best forInvestment apps, wealth management, fintech dashboards

    • SVG pie chart
    • Fade-in tooltips
    • Overlay labels
  7. 07

    User Management Table with Inline Editing Capabilities

    A user management table where clicking any field toggles it into an editable input with smooth focus rings, and real-time JavaScript validation shows animated error messages for invalid entries.

    Best forAdmin panels, CRM tools, user directories

    • Inline edit
    • Focus rings
    • Live validation
  8. 08

    Server Monitoring Dashboard with Live Status Indicators

    A server monitoring dashboard with pulsing green/red status dots indicating healthy or down states, plus collapsible detail panels that slide open on click to reveal per-server metrics.

    Best forDevOps consoles, uptime monitors, infrastructure views

    • Pulsing dots
    • Collapsible panels
    • Status colors
  9. 09

    Sales Performance Dashboard with Interactive Heatmaps

    A sales performance dashboard with interactive SVG heatmaps whose cell opacity shifts on hover to reflect density, plus a live color legend that updates its range as underlying data changes.

    Best forRevenue analytics, territory maps, sales ops tools

    • SVG heatmap
    • Hover density
    • Live legend
  10. 10

    Project Management Kanban Board with Task Cards

    A kanban board with draggable task cards that highlight drop-target columns with ring utilities during drag, plus truncated labels that reveal full text in custom vanilla JS tooltips on hover.

    Best forTask trackers, sprint boards, workflow management

    • Drag cards
    • Drop highlights
    • Overflow tooltips
  11. 11

    Interactive Gantt Chart with Drag-and-Drop Scheduling

    An interactive Gantt chart with horizontally resizable bars for precise start/end scheduling, dashed time grid lines for alignment, and a distinct highlighted column marking the current day.

    Best forProject timelines, resource planning, schedule views

    • Resizable bars
    • Dashed grid
    • Today highlight
  12. 12

    Customer Support Dashboard with Ticket Status Overview

    A customer support dashboard with color-coded priority badges that update dynamically, plus rounded filter buttons that toggle ticket views by status with smooth height transitions.

    Best forHelp desks, support ops, ticket triage panels

    • Status badges
    • Filter pills
    • Height transitions
  13. 13

    Marketing Analytics Dashboard with Conversion Funnel

    A marketing analytics dashboard featuring a conversion funnel built from stacked gradient bars with animated width transitions depicting drop-off rates, plus cursor-following tooltips per stage.

    Best forGrowth dashboards, funnel analysis, campaign tracking

    • Gradient bars
    • Cursor tooltips
    • Drop-off animation
  14. 14

    E-commerce Sales Dashboard with Revenue Forecasting

    An e-commerce sales dashboard with SVG line charts that visually separate historical data from forecast segments on hover, plus a custom toggle switch to flip between monthly and yearly views with smooth fades.

    Best forE-commerce ops, revenue planning, sales forecasting

    • Line charts
    • Forecast toggle
    • Fade transitions
  15. 15

    Social Media Metrics Dashboard with Engagement Graphs

    A social media metrics dashboard with multi-line engagement graphs where hovering a line raises it to full opacity, plus interactive legend controls that toggle visibility of individual platform data lines.

    Best forSocial analytics, content performance, multi-platform tracking

    • Multi-line graphs
    • Opacity hover
    • Toggle legends
  16. 16

    Healthcare Patient Dashboard with Vitals Tracking

    A healthcare patient dashboard with vitals tracking cards featuring animated SVG heartbeat icons that pulse with keyframe animations, plus collapsible detail views that expand smoothly to reveal deeper metrics.

    Best forPatient portals, telehealth, clinical monitoring

    • Heartbeat SVG
    • Keyframe pulse
    • Collapsible details
  17. 17

    Educational Progress Dashboard with Course Completion Stats

    An educational progress dashboard with circular SVG progress bars that animate stroke-dashoffset to show course completion, plus a filtered dropdown overlay for selecting course categories.

    Best forLMS platforms, student portals, training dashboards

    • Circular progress
    • SVG arcs
    • Filtered dropdown
  18. 18

    Real Estate Property Dashboard with Interactive Map

    A real estate dashboard with an interactive map featuring custom zoom controls, pulsating property markers with animate-ping effects, and hover-triggered size increases to spotlight available listings.

    Best forProperty listings, real estate portals, location-based search

    • Custom zoom
    • Pulsing markers
    • Hover expand
  19. 19

    Logistics Tracking Dashboard with Route Optimization

    A logistics tracking dashboard with smooth SVG route paths that re-animate after recalculation, plus draggable waypoint markers with ring highlights that snap to valid grid locations via JavaScript.

    Best forFleet management, delivery ops, supply chain tools

    • SVG routes
    • Draggable waypoints
    • Grid snapping
  20. 20

    Human Resources Dashboard with Employee Attrition Metrics

    An HR dashboard with multi-segmented gradient bar charts representing attrition reasons with dynamic widths, plus filter chips that toggle employee groups and scale up on active state for clear selection feedback.

    Best forHR analytics, people ops, retention dashboards

    • Segmented bars
    • Filter chips
    • Scale transforms
  21. 21

    Financial Expense Tracker with Categorized Spending

    A financial expense tracker with a collapsible doughnut chart whose segments highlight on hover, plus dynamic category toggle buttons that maintain selection state and instantly update spending breakdowns.

    Best forPersonal finance, budget apps, spending analysis tools

    • Doughnut chart
    • Category filters
    • Toggle buttons
  22. 22

    Inventory Management Dashboard with Stock Level Alerts

    An inventory dashboard where cards flash red borders and shake when stock drops below threshold, plus pulsing yellow quantity badges that signal items nearing restock levels.

    Best forWarehouse ops, stock management, reorder systems

    • Alert borders
    • Shake animation
    • Pulse badges
  23. 23

    IoT Device Monitoring Dashboard with Sensor Data Streams

    An IoT monitoring dashboard that streams sensor data into line charts with smooth hover tooltips, plus color-coded device status indicators that update live via WebSocket data feeds.

    Best forIoT platforms, sensor networks, connected device panels

    • Streaming charts
    • Status dots
    • WebSocket feeds
  24. 24

    Cybersecurity Threat Dashboard with Real-Time Alerts

    A cybersecurity dashboard with dismissible toast notifications that slide in from the right on alert events, plus a severity filter dropdown that dynamically narrows the visible threat feed.

    Best forSecurity ops, SOC panels, threat intelligence views

    • Toast alerts
    • Slide-in animation
    • Severity filter
  25. 25

    Personal Fitness Dashboard with Workout History and Goals

    A personal fitness dashboard with grid-based workout history cards showing daily activity bars that animate height on data updates, plus SVG goal progress rings that trigger smooth stroke animations when scrolled into view.

    Best forFitness apps, wellness trackers, personal goal dashboards

    • Activity bars
    • SVG progress rings
    • Viewport animation

Preview

How prompt 01 opens

Neumorphic Analytics Dashboard with Real-Time Charts

Prompt 01 / 25Preview
Act as a Senior Frontend Architect and UI/UX Expert.

The Task: Write the complete, production-ready code for a [Neumorphic Analytics Dashboard with Real-Time Charts].

Tech Stack & Environment:
- Strictly a SINGLE HTML file containing everything.
- Use plain HTML5.
- Use the Tailwind CSS CDN (<script src="https://cdn.tailwindcss.com"></script>) in the head for all styling.
- Use plain Vanilla JavaScript enclosed in <script> tags for any interactivity.
- Use inline SVG paths for any icons (do not use external icon libraries).

Strict Requirements:
- Visual Excellence: It must look like a premium, modern SaaS product (subtle shadows, rounded corners, clean borders, smooth hover/focus effects).
- Responsive: Must look perfect on mobile, tablet, and desktop using Tailwind utility classes.

The feature-by-feature build steps continue in the pack — along with the other 24 prompts.

How to use it

Four steps, from the pack's own guide

Four steps. Zero setup. Every prompt in this pack is engineered to output a complete, single HTML file you can open directly in any browser.

Step 01

Copy the Prompt

Open any prompt page in this pack and copy the full prompt block to your clipboard.

Step 02

Paste into AI

Paste into Claude, ChatGPT, Gemini, Cursor, or any AI coding tool. No modifications required.

Step 03

Copy the Output Code

The AI returns a single complete HTML file. Copy the entire code block it produces.

Step 04

Save & Open

Save it as index.html and double-click to open in your browser. Done.

Tips from the pack

What you get

  • Dashboards & Data Pack HTML file
  • Dashboards & Data Pack PDF
  • Dashboards & Data Instructions PDF

Digital download from Gumroad, available right after checkout. Nothing ships.

Best for

Creators, freelancers, indie builders, affiliate marketers, SaaS founders, and anyone who wants cleaner dashboard UI output faster.

$27One-time purchase
Get the pack →

All sales are final, per the Gumroad listing.

Questions

Before you buy

Which AI tools does it work with?

The pack’s own instructions name Claude, ChatGPT, Gemini, and Cursor. Paste a prompt into any of them, or a similar AI coding tool.

What does each prompt produce?

Each prompt asks the AI for one complete HTML file you can save and open in a browser. What comes back depends on the model you use — the pack recommends a strong one.

Do I need to install anything?

No build tools. Copy a prompt, paste it into your AI tool, save the HTML it returns, and open it in your browser.

What is the prompt customizer?

The HTML version of the pack includes a customizer: enter your brand, colors, or feature goals and it generates a tailored version of any prompt.

Can I get a refund?

No. All sales are final, as stated on the Gumroad listing. Every prompt in the pack is listed on this page so you can check it covers what you need first.

How is this different from the Mission Vault?

A prompt pack gives you single copy-paste prompts for individual UI features. The Mission Vault is a structured set of missions, safety rules, and build checklists for building complete dashboards with Claude Code.

More packs

The other nine packs

Dashboards & Data Pack
$27 · 25 prompts
Get it →