Intermediate6 min readShare
Was this chapter helpful?
Share
How to describe dashboards, data tables, charts, and admin panels to your AI tool — so it builds exactly what you need.
Don't worry — you won't write any dashboard code by hand. Your AI tool handles all the technical parts. This guide helps you understand the concepts so you can describe what you want.
Every dashboard is made of these common pieces. Use these names when describing what you want to your AI tool:
Small cards showing key numbers at the top: total users, revenue, orders today. Usually 3-5 cards in a row with an icon, number, and trend arrow.
Tell AI: "4 stat cards showing: Total Users (1,234 ↑12%), Revenue ($5,678 ↑8%), Orders (89 ↓3%), Active Now (23)"
Rows and columns of data — your users, orders, products. Usually with search, filters, sorting, and pagination.
Tell AI: "A data table of users with columns: Name, Email, Role, Status, Joined Date. Add search, sort by column, and pagination (10 per page)"
A vertical menu on the left side with links to different sections: Overview, Users, Products, Settings, etc.
Tell AI: "A sidebar with sections: Overview, Users, Products, Orders, Analytics, Settings. Highlight the active page. Collapsible on mobile"
A page to view, edit, and manage user accounts. Usually a table with actions like edit, disable, and delete.
Tell AI: "A user management page with a table, search bar, role filter (Admin/Editor/User), and action buttons (Edit, Disable, Delete) on each row"
Forms for updating app configuration: profile, notifications, billing, team members.
Tell AI: "A settings page with tabs: Profile (name, email, avatar), Notifications (email toggles), Billing (current plan, upgrade button), Team (invite members)"
Visual representations of data over time: line charts, bar charts, pie charts. Usually powered by Recharts or Chart.js.
Tell AI: "A line chart showing daily revenue for the last 30 days, and a bar chart showing orders by category. Use Recharts"
Not sure which chart to ask for? Here's a simple guide to help you pick the right one:
Shows trends over time
Use when you want to see how something changes day by day, week by week, or month by month. Perfect for revenue, user signups, or page views over time.
Tell AI: "Add a line chart showing daily revenue for the last 30 days using Recharts. Include a tooltip that shows the exact value on hover."
Compares categories side by side
Use when you want to compare different groups — like sales by product, users by country, or orders by status. Makes it easy to see which category is biggest.
Tell AI: "Add a bar chart comparing monthly sales across 5 product categories using Recharts. Use different colors for each bar and add labels."
Shows proportions of a whole
Use when you want to show percentages or how parts make up a total — like traffic sources (40% Google, 30% direct, 30% social) or user roles.
Tell AI: "Add a donut chart showing user distribution by plan: Free (60%), Pro (30%), Enterprise (10%). Show percentages on hover with Recharts."
Shows volume over time
Like a line chart but filled in underneath. Use when you want to emphasize the total amount, not just the trend. Great for showing cumulative totals or comparing two overlapping datasets.
Tell AI: "Add an area chart showing daily active users vs new signups for the last 90 days using Recharts. Use semi-transparent fills so both areas are visible."
Stat cards on top, charts in the middle, recent activity table at the bottom. Good for SaaS apps that need to show business metrics.
Structure: 4 stat cards → 2 charts side-by-side → Recent orders table
Sidebar navigation + main content area. Each nav item leads to a different management page (users, products, orders).
Structure: Sidebar → Top header with search + avatar → Content area with table/forms
Pipeline view with drag-and-drop cards (like Trello). Shows deals or tasks moving through stages.
Structure: Pipeline columns (Lead → Contact → Proposal → Won) → Draggable cards in each column
You're building a project management tool and need a dashboard for your users. It shows 4 stat cards at the top (active projects, completed tasks, team members, overdue items), a line chart of tasks completed per week, a bar chart of projects by status, and a recent activity table. The sidebar has links to Projects, Team, Reports, and Settings.
Build this with AI
"Build a SaaS analytics dashboard with: a collapsible sidebar (Projects, Team, Reports, Settings), 4 stat cards at the top (Active Projects: 12, Completed Tasks: 847 ↑23%, Team Members: 8, Overdue Items: 3 ↓ in red), a line chart showing tasks completed per week for the last 12 weeks, a bar chart showing projects by status (Planning, In Progress, Review, Completed), and a recent activity feed showing the last 10 actions (user avatar, action text, timestamp). Use Tailwind CSS and Recharts. Make it responsive."
Yes, but don't worry — your AI tool will set it up for you. The most popular charting library for React is Recharts. Just tell your AI 'use Recharts for the charts' and it will install it and create the chart components. Other options include Chart.js and Nivo, but Recharts is the easiest to work with.
A dashboard is a read-only overview that displays data visually — charts, stats, and graphs. An admin panel is a control center where you can manage data — edit users, delete orders, change settings. Most apps combine both: a dashboard homepage with admin management pages accessible from the sidebar.
Start by building with fake (hardcoded) data so you can get the layout right. Then connect it to real data by telling your AI: 'Replace the hardcoded data with a fetch call to my API endpoint /api/stats.' If you're using Supabase or another database, say 'Fetch the dashboard data from my Supabase database instead of using fake data.'
Yes! Tell your AI: 'Make the dashboard stats refresh every 30 seconds' for simple polling, or 'Add real-time updates using Supabase subscriptions' for instant updates. Polling (checking every few seconds) is simpler and works for most dashboards. Real-time subscriptions are better for chat apps or live data feeds.
Build a complete dashboard
"Build an admin dashboard with: a collapsible sidebar (Overview, Users, Products, Orders, Settings), a top header with search bar and user avatar dropdown, 4 stat cards (Total Users, Revenue, Orders, Conversion Rate with trend indicators), a line chart showing revenue over the last 30 days, and a recent orders table with status badges. Use Tailwind CSS and Recharts for the chart. Make the sidebar collapse to icons on mobile."
Add a data table
"Create a reusable data table component with: column sorting (click header to sort), search/filter bar, pagination (10/25/50 per page), row selection with checkboxes, and action buttons (Edit, Delete) on each row. Style with Tailwind CSS. Make it responsive — on mobile, show a card layout instead of a table."
Build a settings page
"Create a settings page with a tab navigation: Profile (edit name, email, bio, upload avatar), Notifications (toggle email notifications for different events), Billing (show current plan, usage, upgrade button), and Team (list members with roles, invite new member form). Use Tailwind CSS with form validation."
