SaaS
SaaS — Dashboard UI
Copy-paste layout brief covering Layout Structure, Sidebar Navigation, Top Header and Dashboard Widgets — hand it to ChatGPT, Claude, or v0 as-is.
SaaS — Dashboard UI is a copy-ready build prompt for saas pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
We keep this entry in sync on a schedule, so the counts and the description track the upstream project.
| Use case | SaaS |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
Create a SaaS admin dashboard interface:
1. LAYOUT STRUCTURE
- Fixed sidebar on left (240px width)
- Top header bar with search and user menu
- Main content area with padding
2. SIDEBAR NAVIGATION
- Logo at top
- Navigation items with icons:
- Dashboard (home icon)
- Projects (folder icon)
- Tasks (checkbox icon)
- Team (users icon)
- Messages (chat icon)
- Calendar (calendar icon)
- Reports (chart icon)
- Settings (gear icon)
- Active state with background highlight
- Collapse button at bottom
3. TOP HEADER
- Search bar with keyboard shortcut hint (⌘K)
- Notification bell with badge
- User avatar with dropdown menu
4. DASHBOARD WIDGETS (grid layout)
Row 1 (4 stat cards):
- Total Projects: 24 (+12% from last month)
- Active Tasks: 156 (23 overdue)
- Team Members: 12 (3 online)
- Hours Logged: 342h this week
Row 2 (2 columns):
- Left: Task completion chart (line graph, last 7 days)
- Right: Project status breakdown (donut chart)
Row 3 (2 columns):
- Left: Recent activity feed (5 items with avatars)
- Right: Upcoming deadlines (list with due dates)
Row 4 (full width):
- Team workload table (name, assigned tasks, completion rate, status)
5. DESIGN DETAILS
- Light theme with #f8fafc background
- Cards with white background and subtle shadow
- Accent color #6366f1 for active states
- Use consistent 8px spacing grid
- Rounded corners (8px for cards, 6px for buttons)
Make it responsive - sidebar collapses to icons on tablet, becomes bottom nav on mobile.How to use it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts