Dashboard Design Prompts

Build a responsive analytics dashboard with a fixed sidebar navigation, top header with search and user avatar, and a main content area. Include: 4 KPI metric cards at the top (revenue, users, conversion rate, active sessions), a large area chart for trends, a bar chart for comparisons, and a recent activity data table. Use a clean, professional color palette with a white background and subtle gray borders. Ensure proper spacing between all elements.

Create an admin dashboard page with shadcn/ui components. Include a collapsible sidebar with icons and labels, breadcrumb navigation, 4 stat cards with sparkline charts, a main data table with sorting/filtering/pagination, and a notification dropdown. Use Tailwind CSS with neutral gray palette. The layout should be responsive with the sidebar collapsing to icons on mobile.

I need a Next.js dashboard page using Tailwind CSS and Recharts. Structure: fixed left sidebar (240px) with logo, nav links with icons, and user profile at bottom. Main area has a top bar with page title and date range picker. Content grid: row 1 has 4 metric cards, row 2 has a line chart (60% width) and a donut chart (40% width), row 3 has a data table. Use Inter font, 16px base grid, and a warm neutral color scheme.

Generate a complete dashboard layout as a React component with TypeScript. Requirements: responsive grid layout using CSS Grid, dark/light theme support via CSS custom properties, sidebar navigation with nested menu items, metric cards with trend indicators (up/down arrows + percentage), chart placeholders using recharts, and a sortable data table. Follow accessibility best practices with proper ARIA roles. Use Tailwind CSS for styling.

Design a finance dashboard with a dark sidebar (#0f172a) and a light content area (#f8fafc). Sidebar: 256px wide, nav labels in #94a3b8, active item with a #3b82f6 left border and #1e293b background. Content: 4 KPI cards showing balance, income, expenses, and savings rate, each with a 12-point sparkline. Numbers use tabular-nums at 28px semibold; positive deltas in #16a34a, negative in #dc2626, always paired with an arrow icon so color is not the only signal. Cards on white with 1px #e2e8f0 borders, 24px padding, 24px grid gap. Include a transactions table with zebra rows (#f1f5f9) and right-aligned amounts.

Create a mobile-first analytics dashboard with shadcn/ui. On mobile: a bottom tab bar (4 items, 56px tall, 44px minimum touch targets), stacked full-width metric cards, and horizontally scrollable chart cards with scroll-snap. On md and up: switch to a 12-column grid with a collapsible left sidebar. Palette: background #fafafa, cards #ffffff with border #e5e5e5, single accent indigo #4f46e5 for active states and chart lines. Typography: Inter, 14px body, 24px card values. Charts must include visible axis labels at 12px #737373 and pass 4.5:1 contrast for all text.

Build a realtime operations dashboard in Next.js with Tailwind and Recharts. Dark theme: background #09090b, panels #131316 with 1px #26262b borders, 8px radius. Status semantics: healthy #22c55e, degraded #f59e0b, down #ef4444, each shown as a dot plus a text label (never color alone). Layout: a top status strip of 6 service tiles, a large streaming line chart with a 60-second window, and a log feed in JetBrains Mono 13px with #a1a1aa timestamps. Use aria-live=polite on the log feed, 16px grid gaps, and a pulsing dot animation limited to transform and opacity for performance.

Generate an HR admin panel as a React TypeScript component. Layout: 240px sidebar with grouped nav sections (People, Payroll, Settings) using 11px uppercase #6b7280 group labels, plus a content area with a sticky header holding breadcrumbs and a search input. Include an employee table with avatar, name, department badge, and status pill; pills use tinted backgrounds (#dcfce7 with #166534 text for active, #fee2e2 with #991b1b for offboarding) to keep 4.5:1 contrast. Row height 56px, cell padding 16px, header row #f9fafb. Add a slide-over detail drawer (480px) with labeled field groups on a 24px vertical rhythm. Font: Inter throughout.