Back to guide/General Productivity

Dashboard Layout

Breaks the dashboard into named zones (top bar, sidebar, content) with exact dimensions and content, so v0 generates a complete layout rather than a single generic panel.

v0-promptsdashboard_typeapp_namenav_items
Edit View
Prompt
Create a {{dashboard_type}} dashboard with these sections:\n\nTop bar:\n- Logo (text "{{app_name}}") on the left\n- Search input (cmd+K shortcut hint) in the center\n- User avatar dropdown on the right\n\nSidebar (240px, collapsible):\n- Navigation items: {{nav_items}}\n- Active item: {{accent_color}} background, bold text\n- Collapse to icons only on toggle\n\nMain content area:\n- Stats row: {{stat_cards}} displayed as cards with icon, label, value, and trend arrow\n- Primary chart: {{chart_type}} chart (use a placeholder chart component)\n- Data table: {{table_columns}} columns, sortable headers, pagination\n\nDesign: {{design_style}} theme. Use shadcn/ui components. Dark mode support via CSS variables. Responsive — sidebar becomes a hamburger menu on mobile.

Variables to customize

{{dashboard_type}}{{app_name}}{{nav_items}}{{accent_color}}{{stat_cards}}{{chart_type}}{{table_columns}}{{design_style}}

Why this prompt works

Breaks the dashboard into named zones (top bar, sidebar, content) with exact dimensions and content, so v0 generates a complete layout rather than a single generic panel.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.