How to Build a SaaS Dashboard with VULK

Updated July 17, 2026 — refreshed with verified platform data; the prompts below are the tested versions.

How do you build a SaaS dashboard with VULK?

The complete answer: start with one detailed prompt that specifies the layout (sidebar width, header, content area), the navigation items, the stat cards with real numbers, the chart types, and the table columns — VULK generates a complete Vite + React + TypeScript + Tailwind project with Recharts wired in, running in a live preview in under two minutes. Then build the rest in ordered follow-up prompts: authentication, chart interactivity, table sorting/filtering/CSV export, additional pages (Projects, Settings), and polish (responsive sidebar, skeletons, empty states, dark mode). Deploy to Cloudflare Pages with one click. This article gives you every prompt, copy-paste ready, in the order that works.

If this feels like the canonical AI-builder use case, it is: dashboards and admin panels are the #1 category of AI-generated apps at 12.5% of all projects — nearly 8× more common than the stereotypical to-do app (1.6%, rank 13) — per VULK platform data, July 2026, N = 10,994 active projects classified. Internal-tool-shaped software is what people actually build when generating an app costs one paragraph of text.

What are we building?

A SaaS analytics dashboard with a collapsible sidebar, multiple chart types, a searchable data table, user authentication, and export functionality. This is the kind of internal tool that typically takes a frontend developer two to three weeks to build from scratch. With VULK, the first working version takes minutes.

This tutorial walks through the exact prompts and iteration workflow to go from nothing to a polished, deployable dashboard.

Step 1: What should the initial generation prompt contain?

The quality of the initial generation depends entirely on how much context you provide. Here is a prompt that consistently produces a strong foundation:

Build a SaaS analytics dashboard for a project management tool.

Layout: Fixed sidebar on the left (240px, collapsible to icons only
on mobile), top header with user avatar and notification bell,
main content area with padding.

Sidebar navigation:
- Dashboard (home icon)
- Projects (folder icon)
- Tasks (checkbox icon)
- Team (users icon)
- Reports (chart icon)
- Settings (gear icon)

Dashboard page content:
1. Top row: 4 stat cards showing Total Projects (127),
   Active Tasks (843), Team Members (24), Completion Rate (87%)
   Each card has an icon, value, label, and percentage change
   from last month (green for positive, red for negative)

2. Middle row: Two charts side by side
   - Line chart: "Task Completion Trend" showing last 12 months
   - Bar chart: "Projects by Department" with 6 departments

3. Bottom row: Data table "Recent Tasks" with columns:
   Task Name, Project, Assignee (with avatar), Priority
   (Low/Medium/High badges), Status (To Do/In Progress/Done
   badges), Due Date. Include search input and pagination
   (10 rows per page).

Color scheme: White background, slate-gray sidebar, blue accent
color (#3B82F6) for active states and primary buttons.
Use Tailwind CSS and Recharts for charts. TypeScript.

This prompt specifies layout dimensions, navigation structure, data content, chart types, table columns, and visual design. The AI does not need to guess at any of these decisions. (For calibration: the median prompt on the platform is ~60 words and works fine for simple apps; a dashboard this specific deserves the longer treatment — VULK platform data, July 2026.)

Step 2: What should you check in the initial output?

After generation, VULK's live preview shows the complete dashboard. Here is what to check:

Layout structure. The sidebar should be fixed-position, the header sticky, and the content area should scroll independently. Verify that the sidebar collapses correctly on smaller viewports.

Chart rendering. Recharts components should render with proper axes, labels, and responsive containers. The data should match what you specified — 12 months for the line chart, 6 departments for the bar chart.

Table functionality. The data table should render all columns, display badge-styled priority and status fields, and include the search input and pagination controls.

Component organization. Check that the generated code uses separate component files — Sidebar.tsx, StatCard.tsx, TaskTable.tsx, CompletionChart.tsx — rather than putting everything in a single page file. (A typical generated project is ~20 focused files, not one monolith — VULK platform data, July 2026.)

Step 3: How do you add authentication?

The initial prompt focused on the dashboard UI. Now add authentication:

Add authentication to this dashboard. Include:
- Login page with email and password fields, "Remember me"
  checkbox, and "Forgot password" link
- Registration page with name, email, password, confirm password
- Protected routes: redirect to /login if not authenticated
- User context that stores the logged-in user's name, email,
  and avatar URL
- Logout button in the sidebar footer
- Show the user's name and avatar in the top header

Use a simple auth context with localStorage for the session.
The login form should validate email format and require
password minimum 8 characters.

This generates a complete auth flow with form validation, route protection, and user state management. The surgical edit system adds these files without regenerating the existing dashboard components. (For real multi-user auth with a database, ask for Backend Mode — VULK generates a PostgreSQL-backed API with bcrypt password hashing and JWT sessions; 62% of generated apps include a SQL schema.)

Step 4: How do you enhance the charts?

The initial charts are functional but basic. Improve them:

Enhance the dashboard charts:

1. Make the line chart interactive: show tooltip with exact
   values on hover, add a gradient fill below the line,
   and include a toggle to switch between "Tasks Completed"
   and "Tasks Created" datasets

2. Add a donut chart next to the bar chart showing
   "Task Status Distribution" with segments for To Do (blue),
   In Progress (yellow), Done (green), and Overdue (red).
   Show the total count in the center of the donut.

3. Add a date range picker above the charts section.
   Options: Last 7 days, Last 30 days, Last 3 months,
   Last 12 months, Custom range. The selected range
   should filter all chart data.

Each follow-up prompt builds on the existing code. The AI understands the component structure from the initial generation and modifies the correct files.

Step 5: How do you build out the data table?

Data tables are where SaaS dashboards become genuinely useful. Expand the table:

Upgrade the Recent Tasks table:

1. Add column sorting: click any column header to sort
   ascending/descending. Show a sort arrow indicator.

2. Add filters: dropdown filters for Priority (All/Low/Medium/High)
   and Status (All/To Do/In Progress/Done). Filters work
   alongside the search input.

3. Add row selection: checkbox on each row, "Select All" checkbox
   in the header. Show a floating action bar when rows are
   selected with options: "Mark as Done", "Delete", "Export Selected"

4. Add an "Export CSV" button that downloads the current filtered
   view as a CSV file.

5. Increase to 25 mock data rows with realistic task names
   and varied statuses.

This is a dense prompt, but each requirement is specific. The AI generates sorting logic, filter state management, CSV generation, and selection handling — all integrated into the existing table component.

Step 6: How do you add the Projects page?

Dashboards need more than one page. Expand the sidebar navigation:

Build the Projects page (accessible from the sidebar).

Content:
- Header with "Projects" title and "New Project" button
- Grid of project cards (3 columns on desktop, 1 on mobile)
- Each card shows: project name, description (truncated to
  2 lines), progress bar with percentage, team member avatars
  (stacked, max 3 with +N overflow), due date, and a
  status badge (Active/On Hold/Completed)
- Search bar and filter by status at the top
- "New Project" button opens a modal with: project name,
  description textarea, start date, due date, team member
  selection (multi-select dropdown), and priority selection

Include 9 mock projects with varied data.

Step 7: How do you add the Settings page?

Build the Settings page with tabs:

1. Profile tab: form with avatar upload area, name, email,
   job title, and bio textarea. Save button at bottom.

2. Notifications tab: toggle switches for email notifications
   (task assigned, task completed, project updates, weekly
   digest). Each toggle has a label and description.

3. Appearance tab: theme selector (Light/Dark/System) with
   preview thumbnails, and sidebar position (Left/Right)
   radio buttons.

4. Security tab: change password form (current password,
   new password, confirm new password) and two-factor
   authentication toggle with setup instructions.

Which iteration prompts add the most polish?

After building the core pages, these follow-up prompts improve polish and usability:

Responsive behavior:

Make the sidebar collapse to a hamburger menu on screens
below 768px. The sidebar should slide in as an overlay
with a backdrop. Add smooth transition animations.

Loading states:

Add skeleton loading states for the stat cards, charts,
and data table. Show skeletons for 1.5 seconds when the
dashboard first loads, simulating an API fetch.

Empty states:

Add empty state illustrations for when there are no tasks
(show a clipboard icon with "No tasks yet" message) and
no projects (show a folder icon with "Create your first
project" message and a CTA button).

Dark mode:

Add dark mode support. The theme toggle in Settings should
switch between light and dark themes. Dark mode: #1a1a2e
background, #16213e sidebar, #e2e8f0 text. Store preference
in localStorage.

The projects that end up genuinely polished are the ones that keep iterating — the top 10% of projects on the platform run past 25 messages, against a median of 4 (VULK platform data, July 2026).

What should you review before deploying?

Before deploying your generated dashboard, check these areas:

State management. For a prototype, React context and useState work fine. If your dashboard will grow to 10+ pages with shared state, consider asking VULK to refactor to Zustand or a similar state library.

API integration points. The generated dashboard uses mock data. Identify where fetch calls will replace static arrays — the generated code typically uses clean data structures that map directly to API response shapes. Or skip this entirely by asking for Backend Mode, which provisions a real PostgreSQL-backed API.

Error boundaries. Add error handling around chart components and data fetches. A chart library crash should not take down the entire page.

Accessibility. Verify keyboard navigation in the sidebar, focus management in modals, and proper aria labels on interactive elements. The generated code includes basic accessibility, but complex interactions like the data table may need ARIA enhancements.

How do you deploy the dashboard?

Once satisfied with the result, deploy with one click to Cloudflare Pages. Your dashboard gets a live URL immediately. Share it with stakeholders for feedback, then iterate based on their input. The entire cycle — from first prompt to deployed dashboard — can happen in a single working session.

And do actually deploy: across the platform only 3.7% of generated apps ever reach a public URL (VULK platform data, July 2026). The last click is the rarest one.