How to Build a Dashboard with Antigravity

Overview

Learn how to create a professional admin dashboard using Antigravity's AI Agent in under 20 minutes. This step-by-step tutorial covers analytics charts, data tables, user management, and responsive design.

What You'll Build

A complete admin dashboard featuring:

Overview page with 4 key metric cards
Revenue chart showing 30-day trends
User growth chart with monthly data
Data table with search, filtering, and pagination
User management with CRUD operations
Settings page for configuration
Dark mode support
Responsive design for mobile/tablet/desktop

Prerequisites

Antigravity editor access
Basic understanding of web development
(Optional) PostgreSQL database

Tech Stack

This dashboard uses:

Next.js 14 with App Router
TypeScript for type safety
Prisma ORM with PostgreSQL
Recharts for data visualizations
TanStack Table for advanced data tables
shadcn/ui component library
Tailwind CSS for styling

Step 1: Create Workspace

Open Antigravity and create a new workspace:

Project name: admin-dashboard
Location: ~/projects/admin-dashboard

Step 2: Submit Your Prompt

Copy and paste this comprehensive prompt:

Create a comprehensive admin dashboard with the following features:

OVERVIEW PAGE:
- 4 metric cards showing:
  1. Total Revenue (with % change from last month)
  2. Active Users (with % change)
  3. New Signups This Month
  4. Average Order Value
- Line chart: Revenue trends (last 30 days)
- Bar chart: User signups by month (last 6 months)
- Area chart: Order volume over time

USER MANAGEMENT:
- Data table with columns:
  - Avatar (circular image)
  - Name
  - Email
  - Role (Admin, User, Guest)
  - Status (Active, Inactive)
  - Created At
  - Actions (View, Edit, Delete)
- Features:
  - Global search across all fields
  - Filter by role and status
  - Sort by any column
  - Pagination (10, 25, 50 per page)
  - Bulk select and actions
- User detail modal:
  - View full profile
  - Edit user information
  - Change role
  - Deactivate account

SETTINGS PAGE:
- Tab navigation:
  1. Profile Settings
     - Name, email, avatar upload
     - Bio and social links
  2. Appearance
     - Dark mode toggle
     - Color scheme selector
  3. Notifications
     - Email notification preferences
     - Push notification settings
  4. Security
     - Change password
     - Two-factor authentication toggle

NAVIGATION:
- Responsive sidebar with:
  - Dashboard link
  - Users link
  - Settings link
  - Logout button
- Mobile: collapsible hamburger menu
- Desktop: fixed sidebar

TECH STACK:
- Next.js 14 with App Router
- TypeScript
- Prisma + PostgreSQL
- Recharts for visualizations
- TanStack Table (@tanstack/react-table)
- shadcn/ui components
- Tailwind CSS
- Lucide icons

DATA MODELS:
User {
  id: string (UUID)
  name: string
  email: string (unique)
  avatar: string?
  role: enum (ADMIN, USER, GUEST)
  status: enum (ACTIVE, INACTIVE)
  bio: string?
  socialLinks: Json?
  createdAt: DateTime
  updatedAt: DateTime
}

Metric {
  id: string
  type: enum (REVENUE, USERS, SIGNUPS, ORDER_VALUE)
  value: float
  date: DateTime
  metadata: Json?
}

UserPreference {
  id: string
  userId: string
  theme: enum (LIGHT, DARK, SYSTEM)
  emailNotifications: boolean
  pushNotifications: boolean
}

API ROUTES:
- GET /api/users (paginated, filterable)
- GET /api/users/[id]
- PUT /api/users/[id]
- DELETE /api/users/[id]
- GET /api/metrics?type=revenue&days=30
- GET /api/preferences/[userId]
- PUT /api/preferences/[userId]

DESIGN REQUIREMENTS:
- Mobile-first responsive design
- Professional color palette (blue primary)
- Loading skeletons for all async data
- Error states with retry buttons
- Toast notifications for actions
- Smooth transitions and animations
- Accessibility (ARIA labels, keyboard navigation)

FEATURES:
- Real-time metric updates every 30 seconds
- Optimistic updates for user actions
- Form validation with error messages
- Confirmation modals for destructive actions
- CSV export for user data
- Search debouncing (300ms)
- Lazy loading for images

Step 3: Review Implementation Plan

Antigravity generates an Implementation Plan artifact showing:

File Structure

admin-dashboard/
├── prisma/
│   └── schema.prisma (User, Metric, UserPreference models)
├── app/
│   ├── layout.tsx (root layout with providers)
│   ├── page.tsx (overview dashboard)
│   ├── users/
│   │   ├── page.tsx (user management)
│   │   └── [id]/page.tsx (user detail)
│   ├── settings/
│   │   └── page.tsx (settings with tabs)
│   └── api/
│       ├── users/
│       │   ├── route.ts (GET, POST)
│       │   └── [id]/route.ts (GET, PUT, DELETE)
│       ├── metrics/
│       │   └── route.ts (GET with filters)
│       └── preferences/
│           └── [userId]/route.ts (GET, PUT)
├── components/
│   ├── dashboard/
│   │   ├── MetricCard.tsx
│   │   ├── RevenueChart.tsx
│   │   ├── SignupsChart.tsx
│   │   └── OrderVolumeChart.tsx
│   ├── users/
│   │   ├── UserTable.tsx
│   │   ├── UserTableFilters.tsx
│   │   ├── UserDetailModal.tsx
│   │   └── UserActions.tsx
│   ├── layout/
│   │   ├── Sidebar.tsx
│   │   ├── Header.tsx
│   │   └── MobileNav.tsx
│   └── settings/
│       ├── ProfileSettings.tsx
│       ├── AppearanceSettings.tsx
│       ├── NotificationSettings.tsx
│       └── SecuritySettings.tsx
├── lib/
│   ├── prisma.ts
│   ├── utils.ts
│   └── validations.ts
└── package.json

Key Components

MetricCard.tsx

Displays metric value
Shows percentage change with up/down arrow
Color-coded (green positive, red negative)
Loading skeleton state

RevenueChart.tsx

Line chart with Recharts
30-day data
Responsive container
Tooltip with formatted values
Grid and axes

UserTable.tsx

TanStack Table implementation
Column definitions with sorting
Global search filter
Role and status filters
Pagination controls
Row selection
Action buttons per row

Sidebar.tsx

Fixed position on desktop
Slide-out on mobile
Active link highlighting
Collapsible sections
User profile at bottom

Review Checklist

Before proceeding, verify:

[ ] Prisma models match requirements
[ ] All API endpoints included
[ ] UI components cover all features
[ ] Responsive design planned
[ ] Dark mode support added

Add Comments if adjustments needed:

"Use server actions instead of API routes"
"Add real-time updates with Pusher"
"Include unit tests for API endpoints"

Click "Proceed" when satisfied.

Step 4: Watch Task Groups Execute

Antigravity breaks work into parallel task groups:

Task Group 1: Database Setup (2-3 min)

Create Prisma schema with 3 models
Generate Prisma client
Create initial migration
Seed database with sample data

Files Modified:

prisma/schema.prisma
prisma/seed.ts

Task Group 2: API Routes (3-4 min)

User CRUD endpoints
Metrics endpoint with filtering
Preferences endpoints
Input validation with Zod
Error handling

Files Created:

app/api/users/route.ts
app/api/users/[id]/route.ts
app/api/metrics/route.ts
app/api/preferences/[userId]/route.ts
lib/validations.ts

Task Group 3: Dashboard Components (4-5 min)

MetricCard with loading states
Three chart components (Revenue, Signups, Orders)
Overview page layout
Data fetching and state management

Files Created:

components/dashboard/MetricCard.tsx
components/dashboard/RevenueChart.tsx
components/dashboard/SignupsChart.tsx
components/dashboard/OrderVolumeChart.tsx
app/page.tsx

Task Group 4: User Management (5-6 min)

UserTable with TanStack Table
Search and filter components
User detail modal
CRUD operations with optimistic updates

Files Created:

components/users/UserTable.tsx
components/users/UserTableFilters.tsx
components/users/UserDetailModal.tsx
app/users/page.tsx

Task Group 5: Settings Page (3-4 min)

Tabbed interface
Profile, Appearance, Notifications, Security sections
Form handling with React Hook Form
Auto-save functionality

Files Created:

components/settings/ProfileSettings.tsx
components/settings/AppearanceSettings.tsx
components/settings/NotificationSettings.tsx
components/settings/SecuritySettings.tsx
app/settings/page.tsx

Task Group 6: Layout & Navigation (2-3 min)

Responsive sidebar
Mobile navigation
Dark mode provider
Toast notification setup

Files Created:

components/layout/Sidebar.tsx
components/layout/Header.tsx
components/layout/MobileNav.tsx
app/layout.tsx

Step 5: Review the Walkthrough

When complete, Antigravity provides a detailed walkthrough:

Summary

# Admin Dashboard - Implementation Complete

Successfully created a full-featured admin dashboard with:
- Overview page with 4 metrics and 3 charts
- User management with advanced data table
- Settings page with 4 sections
- Responsive navigation
- Dark mode support

## Key Features Implemented

✅ Real-time metrics with 30-second refresh
✅ Advanced data table (search, filter, sort, paginate)
✅ User CRUD operations with modals
✅ Settings with auto-save
✅ Mobile-responsive design
✅ Dark mode toggle
✅ Loading states and error handling
✅ Toast notifications

## Files Created: 28
## Lines of Code: ~3,500

## API Endpoints: 7
- GET /api/users
- GET /api/users/[id]
- PUT /api/users/[id]
- DELETE /api/users/[id]
- GET /api/metrics
- GET /api/preferences/[userId]
- PUT /api/preferences/[userId]

Screenshots

The walkthrough includes screenshots of:

Overview dashboard with metrics and charts
User management table with filters
User detail modal
Settings page with tabs
Mobile navigation
Dark mode view

Step 6: Setup and Test

Install Dependencies

Approve the pending command:

npm install recharts @tanstack/react-table date-fns lucide-react

Setup Database

Run Prisma migrations:

npx prisma migrate dev --name init
npx prisma generate
npx prisma db seed

Start Development Server

npm run dev

Open http://localhost:3000

Step 7: Test Key Features

Overview Page Testing

Metrics:

[ ] All 4 metric cards display correctly
[ ] Percentage changes show with correct colors
[ ] Loading skeletons appear during fetch

Charts:

[ ] Revenue chart renders 30 days of data
[ ] Signup chart shows 6 months
[ ] Order volume chart displays correctly
[ ] Tooltips show on hover
[ ] Charts are responsive

User Management Testing

Table Features:

[ ] Users load with pagination
[ ] Global search works across all fields
[ ] Role filter works (Admin, User, Guest)
[ ] Status filter works (Active, Inactive)
[ ] Sorting works on all columns
[ ] Pagination controls function

User Actions:

[ ] View user opens detail modal
[ ] Edit user updates successfully
[ ] Delete user shows confirmation
[ ] Bulk select and actions work
[ ] Export to CSV downloads data

Settings Page Testing

Profile:

[ ] Avatar upload works
[ ] Name/email update and save
[ ] Social links save correctly

Appearance:

[ ] Dark mode toggle functions
[ ] Theme persists after reload

Notifications:

[ ] Email toggle works
[ ] Push toggle works
[ ] Auto-saves changes

Security:

[ ] Change password form validates
[ ] 2FA toggle functions

Responsive Testing

Mobile (< 768px):

[ ] Hamburger menu appears
[ ] Sidebar slides in/out
[ ] Tables scroll horizontally
[ ] Cards stack vertically
[ ] Charts are responsive

Tablet (768px - 1024px):

[ ] Sidebar collapses to icons
[ ] Content adjusts width
[ ] Charts maintain readability

Desktop (> 1024px):

[ ] Full sidebar visible
[ ] Charts use full width
[ ] Tables display all columns

Customization Guide

Add New Metrics

Update Prisma schema:

enum MetricType {
  REVENUE
  USERS
  SIGNUPS
  ORDER_VALUE
  CONVERSION_RATE  // New metric
}

Create new MetricCard:

<MetricCard
  title="Conversion Rate"
  value="3.2%"
  change={+0.5}
  icon={<TrendingUp />}
/>

Add API endpoint filter:

// app/api/metrics/route.ts
if (type === 'CONVERSION_RATE') {
  // Fetch conversion data
}

Add Chart Type

Install additional Recharts components:

import { PieChart, Pie, Cell } from 'recharts';

// Create PieChartComponent.tsx
export function TrafficSourceChart({ data }) {
  return (
    <PieChart width={400} height={300}>
      <Pie data={data} dataKey="value" />
    </PieChart>
  );
}

Customize Colors

Edit Tailwind config:

// tailwind.config.ts
theme: {
  extend: {
    colors: {
      primary: {
        50: '#eff6ff',
        // ... your colors
        900: '#1e3a8a',
      },
    },
  },
}

Add Real-Time Updates

Install Pusher:

npm install pusher-js

Setup real-time metrics:

// components/dashboard/RevenueChart.tsx
useEffect(() => {
  const pusher = new Pusher('key');
  const channel = pusher.subscribe('metrics');

  channel.bind('revenue-update', (data) => {
    setMetrics(prev => [...prev, data]);
  });

  return () => pusher.disconnect();
}, []);

Add Export Functionality

Install export library:

npm install xlsx

Implement export:

import * as XLSX from 'xlsx';

function exportToExcel() {
  const worksheet = XLSX.utils.json_to_sheet(users);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Users');
  XLSX.writeFile(workbook, 'users.xlsx');
}

Troubleshooting

Charts Not Rendering

Issue: Recharts components show blank

Solution:

Ensure data format is correct:

const data = [
  { date: '2025-01-01', revenue: 1200 },
  { date: '2025-01-02', revenue: 1500 },
];

Check ResponsiveContainer wraps chart:

<ResponsiveContainer width="100%" height={300}>
  <LineChart data={data}>
    {/* chart components */}
  </LineChart>
</ResponsiveContainer>

Table Pagination Issues

Issue: Pagination doesn't update data

Solution: Verify TanStack Table setup:

const table = useReactTable({
  data,
  columns,
  pageCount: Math.ceil(totalItems / pageSize),
  state: {
    pagination: { pageIndex, pageSize },
  },
  onPaginationChange: setPagination,
  manualPagination: true, // Important!
});

Dark Mode Not Persisting

Issue: Theme resets on page reload

Solution: Use next-themes with localStorage:

// app/layout.tsx
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

Slow Table Performance

Issue: Table lags with large datasets

Solution: Enable virtualization:

npm install @tanstack/react-virtual

import { useVirtualizer } from '@tanstack/react-virtual';

const rowVirtualizer = useVirtualizer({
  count: rows.length,
  getScrollElement: () => tableContainerRef.current,
  estimateSize: () => 50,
});

Advanced Features

Add Real-Time Collaboration

Use Pusher Presence channels:

const channel = pusher.subscribe('presence-dashboard');

channel.bind('pusher:member_added', (member) => {
  console.log('User joined:', member.info);
});

Implement Role-Based Access

Protect routes with middleware:

// middleware.ts
export function middleware(request: NextRequest) {
  const user = await getUser(request);

  if (request.nextUrl.pathname.startsWith('/admin')) {
    if (user.role !== 'ADMIN') {
      return NextResponse.redirect('/unauthorized');
    }
  }
}

Add Advanced Filtering

Implement filter builder:

type Filter = {
  field: string;
  operator: 'equals' | 'contains' | 'gt' | 'lt';
  value: any;
};

function buildQuery(filters: Filter[]) {
  return filters.reduce((query, filter) => {
    query.where[filter.field] = {
      [filter.operator]: filter.value,
    };
    return query;
  }, {});
}

Add Data Export Scheduling

Create scheduled export:

// app/api/exports/schedule/route.ts
export async function POST(request: Request) {
  const { frequency, format } = await request.json();

  // Setup cron job for scheduled export
  await scheduleExport(frequency, format);

  return Response.json({ success: true });
}

Performance Optimization

Optimize Chart Rendering

Use React.memo:

export const RevenueChart = React.memo(({ data }) => {
  // Chart implementation
}, (prevProps, nextProps) => {
  return prevProps.data === nextProps.data;
});

Implement Caching

Cache API responses:

// app/api/metrics/route.ts
export const revalidate = 300; // Cache for 5 minutes

export async function GET(request: Request) {
  // Data fetching
}

Lazy Load Components

Code-split heavy components:

import dynamic from 'next/dynamic';

const RevenueChart = dynamic(
  () => import('@/components/dashboard/RevenueChart'),
  { loading: () => <Skeleton /> }
);

Next Steps

Congratulations! You've built a professional dashboard. Now:

Add Authentication: How to Build Auth with Antigravity
Learn Prisma: How to Extend Prisma Schema
Build CRUD: How to Build CRUD with Antigravity
Best Practices: Antigravity Best Practices

Conclusion

In 15-20 minutes, you've created a production-ready admin dashboard with:

Real-time metrics and charts
Advanced data table
User management
Settings page
Dark mode
Responsive design

Antigravity handled all the boilerplate, setup, and implementation while you focused on requirements.

Try building other projects: Antigravity Projects Examples

Keywords: antigravity dashboard example, create dashboard antigravity, antigravity UI examples, build admin dashboard, antigravity recharts, antigravity data table, nextjs dashboard antigravity

How to Build a Dashboard with Antigravity

How to Build a Dashboard with Antigravity

Overview

What You'll Build

Prerequisites

Tech Stack

Step 1: Create Workspace

Step 2: Submit Your Prompt

Step 3: Review Implementation Plan

File Structure

Key Components

Review Checklist

Step 4: Watch Task Groups Execute

Task Group 1: Database Setup (2-3 min)

Task Group 2: API Routes (3-4 min)

Task Group 3: Dashboard Components (4-5 min)

Task Group 4: User Management (5-6 min)

Task Group 5: Settings Page (3-4 min)

Task Group 6: Layout & Navigation (2-3 min)

Step 5: Review the Walkthrough

Summary

Screenshots

Step 6: Setup and Test

Install Dependencies

Setup Database

Start Development Server

Step 7: Test Key Features

Overview Page Testing

User Management Testing

Settings Page Testing

Responsive Testing

Customization Guide

Add New Metrics

Add Chart Type

Customize Colors

Add Real-Time Updates

Add Export Functionality

Troubleshooting

Charts Not Rendering

Table Pagination Issues

Dark Mode Not Persisting

Slow Table Performance

Advanced Features

Add Real-Time Collaboration

Implement Role-Based Access

Add Advanced Filtering

Add Data Export Scheduling

Performance Optimization

Optimize Chart Rendering

Implement Caching

Lazy Load Components

Next Steps

Conclusion

Related Articles

Vibe Coding Sora AI: Copilot, Cursor & Prompt Engineering Tutorial

Vibe Coding Tutorial: Sora AI, Copilot, Cursor & Prompt Engineering

AI Coding Tutorial: Vibe Coding with Copilot, Cursor & Google Antigravity