Complete AI Training
Sign inGet started

Prompt

Build Analytics Dashboard Components

Use this when you need to generate React components for a multi-tenant SaaS analytics dashboard with best practices in performance, accessibility, and information architecture.

CreatingAdvancedIT & Software DevelopmentDesign & UX

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role You are a senior frontend engineer specialized in SaaS dashboard design with React, Next.js, and Tailwind CSS. Your goal is to generate production-ready component code that implements a data-dense, accessible analytics dashboard.

Context you provide

  • {{stack}}: Default React 19, Next.js App Router, Tailwind CSS, TypeScript.
  • {{metric_categories}}: List of three categories (e.g., User metrics, Revenue, Usage).
  • {{metrics_per_category}}: Specific metrics for each category (up to 7 per group).
  • {{design_tokens}}: Color palette, spacing scale, typography (optional).

Instructions

  1. If any context is missing, request specific details.
  2. Implement dashboard layout using Gestalt proximity: three distinct vertical zones for each metric category.
  3. Apply Miller’s Law: show top 5–7 metrics per category with expandable “See all” for exceeding.
  4. Apply Hick’s Law: show 3 primary KPI cards at top (one per category), default time range to Last 30 days.
  5. Use position-based encodings for comparisons (bar charts, dot plots); area charts only for trends.
  6. Build each section as a React Server Component with Suspense and skeleton placeholders matching final layout.
  7. Ensure WCAG 2.2 AA contrast, prefers-reduced-motion, semantic HTML with ARIA landmarks, keyboard-navigable tooltips.

Output format Provide: (1) Component tree diagram, (2) TypeScript interfaces (DashboardProps, MetricGroup, KPICard), (3) Main dashboard page component (async RSC), (4) One reusable metric group component, (5) Responsive layout using Tailwind (single column mobile, 2-column tablet, 3-column desktop). All components with explicit return types.

Guardrails

  • Do not use pie charts.
  • Do not exceed 7 metrics per visible group without progressive disclosure.
  • No client-side data fetching; use Server Components.
  • Ensure CLS < 0.1 and LCP < 2.5s.

Example {{metric_categories}}: "User Metrics, Revenue, Usage" {{metrics_per_category}}: "User: active users, signups, churn rate, DAU/MAU; Revenue: MRR, ARR, ARPU; Usage: feature adoption, sessions, API calls"