24 v0 Prompts for Dashboards & Admin Panels (2026)

Build a SaaS revenue overview dashboard. Used by a founder each Monday morning to decide where to focus growth this week.

Product surface:
- Top row of KPI cards: MRR, MRR growth % vs last month, active subscriptions, net revenue churn %, ARPU. Each card shows the value, a delta chip, and a 12-week sparkline.
- A large area chart of MRR over the last 12 months with new / expansion / churned MRR stacked.
- A bar chart of new subscriptions by plan (Free, Pro, Team, Enterprise) for the selected range.
- A date-range selector (7d / 30d / 90d / 12m) that drives every widget.

Stack & constraints:
- Next.js App Router, TypeScript, Tailwind, shadcn/ui (Card, Chart, Select, Badge).
- Design tokens: primary #4F46E5, positive #16A34A, negative #DC2626, radius 0.75rem, font Inter, generous card spacing.
- Fetch data in a server component via a getRevenueMetrics(range) server action returning typed mock data I can later swap for Supabase.
- Responsive down to 360px; cards stack to one column on mobile. Keyboard-accessible controls with visible focus rings.

Build a web analytics dashboard, used by a marketer to check yesterday's traffic and spot what changed.

Product surface:
- KPI cards: unique visitors, pageviews, avg session duration, bounce rate — each with a % change vs the previous period.
- A line chart of visitors per day with a toggle between visitors and pageviews.
- A "top pages" table (path, views, unique visitors, avg time) and a "top sources" table (referrer, sessions, conversion %), each showing the top 10 with a "view all" link.
- A world map or country bar list of sessions by country.
- Filters: date range and device (all / desktop / mobile / tablet).

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card, Table, Tabs, Chart). Read filters from URL search params so views are shareable. Tokens: neutral slate palette, accent #0EA5E9, radius 0.5rem. Server-render the initial data; responsive; keyboard-accessible tables.

Build a support-desk analytics dashboard for a support lead deciding how to staff the week.

Product surface:
- KPI cards: open tickets, avg first-response time, avg resolution time, CSAT %, tickets created today.
- A stacked bar chart of tickets by priority (urgent / high / normal / low) per day.
- A donut of tickets by status (new, open, pending, solved).
- An agent workload table: agent name, assigned, resolved today, avg response time, current status badge (online/away/offline), sorted by open load.
- Filter by team and date range.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card, Chart, Table, Badge, Select). Tokens: primary #7C3AED, warning #F59E0B, radius 0.75rem, Inter. Data comes from a getSupportMetrics(team, range) server action. Responsive; the agent table scrolls horizontally on mobile with a sticky first column.

Build a conversion-funnel dashboard for a growth PM reviewing where signups drop off.

Product surface:
- A horizontal funnel visualization with 5 stages: Visited, Signed up, Activated, Trial started, Paid — each showing the count, the conversion % from the prior stage, and the drop-off count in red.
- KPI cards above it: overall visit-to-paid %, biggest drop-off stage, week-over-week change.
- A line chart of conversion rate per stage over the last 8 weeks.
- A segment selector (all / paid ads / organic / referral) that recomputes the whole funnel.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card, Chart, Select). Build the funnel as a reusable Funnel component taking an array of { stage, count }. Tokens: accent #2563EB, drop-off #DC2626, radius 0.75rem. Responsive; funnel stacks vertically on mobile. Keyboard-navigable segment control.

Build the shell for an internal admin panel — the layout only, no page content yet. It's used by ops staff all day, so navigation has to be fast and obvious.

Product surface:
- A collapsible left sidebar with grouped nav: Overview, Users, Organizations, Billing, Content, Feature Flags, Audit Log, Settings. Each item has an icon and active state.
- A top bar with global search (Command palette on Cmd+K), a notifications bell, and a user menu with avatar, "Account", and "Sign out".
- A main content area with a breadcrumb and a page-title slot.

Constraints: Next.js App Router with a layout.tsx wrapping the sidebar and top bar, Tailwind, shadcn/ui (Sidebar, Command, DropdownMenu, Avatar, Breadcrumb). Tokens: sidebar bg #0F172A, active #6366F1, radius 0.5rem, Inter. On mobile the sidebar collapses into a Sheet triggered by a hamburger. Fully keyboard-accessible; Cmd+K opens the command palette. Use placeholder routes for each nav item.

Build a Users admin page inside my existing admin layout.

Product surface:
- A table of users: avatar + name, email, role (admin/manager/viewer), plan, status (active/invited/suspended) as a Badge, last active, joined date.
- Toolbar: search by name/email, filter by role and status, and a "Add user" button opening a Dialog with name, email, and role fields.
- Row actions in a DropdownMenu: edit, change role, suspend/reactivate, delete (with a confirm Dialog).
- Server-side pagination (25 per page), sortable by name / last active / joined.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Dialog, DropdownMenu, Badge, Select, Input). Back it with server actions: listUsers({ search, role, status, page, sort }), createUser, updateUserRole, setUserStatus, deleteUser — typed, reading from a Supabase `users` table (columns: id, name, email, role, plan, status, last_active_at, created_at). Enforce that only role=admin can change roles or delete, checked inside the server action. Responsive with horizontal scroll; keyboard-accessible menus and dialogs.

Build a moderation queue page for reviewers clearing a backlog fast.

Product surface:
- A list of pending items (e.g. flagged posts or held orders): thumbnail/summary, submitter, reason flagged, amount or content preview, submitted time, and a status Badge.
- Each row has Approve and Reject buttons; Reject opens a Dialog to pick a reason and add a note.
- A bulk mode: select multiple rows via checkboxes and Approve/Reject all selected.
- Tabs for Pending / Approved / Rejected, with a count on each tab.
- Keyboard shortcuts: J/K to move selection, A to approve, R to reject the focused row.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Tabs, Dialog, Checkbox, Badge). Server actions: approveItems(ids), rejectItems(ids, reason). Optimistically update the row on action. Tokens: approve #16A34A, reject #DC2626, radius 0.5rem. Responsive; keyboard shortcuts documented in a small legend.

Build a feature-flags admin page for an engineer toggling rollouts.

Product surface:
- A table of flags: key, description, environment (dev/staging/prod) as tabs, a Switch for on/off, a rollout % slider, and last-updated by/when.
- "New flag" Dialog: key, description, default state, rollout %.
- Each row expands to show targeting rules (e.g. "user.plan == enterprise") as editable chips.
- A search box and a filter for enabled/disabled.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Tabs, Switch, Slider, Dialog, Badge). Server actions: listFlags(env), toggleFlag(key, env, enabled), setRollout(key, env, pct). Persist to a Postgres `feature_flags` table. Confirm before toggling anything in the prod tab. Tokens: primary #6366F1, radius 0.5rem. Responsive; keyboard-accessible switches and sliders.

Build a reusable server-side data table for a large `orders` dataset.

Product surface:
- Columns: order ID, customer, items count, total, payment status (paid/pending/refunded) as a Badge, fulfillment status, created date.
- Server-side pagination (50/page), server-side sorting on any column, and server-side filtering by status and a date range.
- A search box for order ID / customer. Column visibility toggle. Sticky header.
- Read pagination, sort, and filter state from URL search params so links are shareable.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, DropdownMenu, Badge, Input, Select). Data comes from a route handler GET /api/orders that queries Supabase/Postgres with LIMIT/OFFSET and ORDER BY built from the params — do not load all rows into the client. Show a skeleton while loading and an empty state. Responsive with horizontal scroll and a sticky first column; keyboard-accessible sort headers.

Build a full CRUD page for a `products` resource.

Product surface:
- A table: name, SKU, category, price, stock, status (active/draft/archived).
- "New product" and per-row "Edit" open the same Dialog form with fields: name, SKU, category (Select), price (number), stock (number), status, description (textarea). Validate with zod and show inline field errors.
- Delete opens an AlertDialog confirm.
- Toasts on success/failure.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Dialog, AlertDialog, Form, Input, Select, Textarea, Toast). Wire server actions createProduct, updateProduct, deleteProduct against a Supabase `products` table, revalidating the table path after each mutation. Reuse one ProductForm component for create and edit. Responsive; keyboard-accessible form and dialogs with focus trapping.

Add row selection and bulk actions to my existing data table of subscribers.

Product surface:
- A header checkbox to select all on the page, plus per-row checkboxes, with an indeterminate state.
- When one or more rows are selected, show a sticky action bar: "N selected", and buttons Export CSV, Add tag, Change status, Delete (confirm Dialog).
- A "select all N matching filter" option that spans pages, not just the current one.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Checkbox, Button, Dialog). Bulk mutations run through a server action bulkUpdateSubscribers(ids | { allMatching, filter }, action). Optimistically reflect the change and toast the result. Keep the action bar keyboard-reachable and announce the selection count to screen readers. Responsive.

Make specific cells in my inventory table inline-editable.

Product surface:
- The price and stock columns become editable on click: the cell turns into an input, Enter saves, Escape cancels, blur saves.
- The status column becomes an inline Select.
- Show a subtle saving spinner in the cell during the mutation and a brief check on success; revert and toast on error.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Input, Select). Each edit calls a server action updateInventoryCell(rowId, field, value) with optimistic update and rollback on failure. Only allow the price and status edits for role=manager or admin, enforced in the server action. Fully keyboard-operable: Tab moves between editable cells. Responsive.

Build a reusable MetricCard component and a row of them for a dashboard header.

Product surface:
- Each card shows: a label, a big value, a delta chip (+/- % vs previous period, green up / red down), an optional unit prefix/suffix ($, %), and a small sparkline.
- Props: title, value, delta, format ('number' | 'currency' | 'percent'), series (number[] for the sparkline), and a loading state that renders a skeleton.
- Render a row of four: Revenue $[value], Active users [value], Conversion [value]%, Avg order value $[value].

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card) with a small chart lib for the sparkline. Tokens: positive #16A34A, negative #DC2626, radius 0.75rem, Inter, subtle card shadow. Format numbers with Intl.NumberFormat. Cards wrap to 2x2 on tablet and 1 column on mobile. Announce the delta direction to screen readers.

Build a revenue area-chart card for a dashboard.

Product surface:
- A Card titled "Revenue" with a period toggle (Daily / Weekly / Monthly) in the header.
- A smooth gradient area chart of revenue over time, with a hover tooltip showing the date and formatted amount, and a subtle grid.
- A footer line: total for the range and % change vs the previous range.
- An empty state and a loading skeleton.

Constraints: Next.js App Router, Tailwind, shadcn/ui Card + Chart. Accept data as { date, revenue }[] and a period prop; the toggle re-requests via a getRevenueSeries(period) server action. Tokens: area gradient from #6366F1 to transparent, radius 0.75rem. Currency-formatted axis and tooltip. Responsive; the chart keeps a min height and reflows on resize. Keyboard-focusable toggle.

Build a "breakdown" card that shows how a metric splits across categories.

Product surface:
- A Card with a toggle between a horizontal bar view and a donut view of the same data.
- Data: revenue by plan — Free, Pro, Team, Enterprise — each with a value, a % of total, and a color swatch.
- A legend/list below with the category name, value, and % — clicking a legend row highlights its segment.
- Total shown in the donut center.

Constraints: Next.js App Router, Tailwind, shadcn/ui Card + Chart. Accept data as { label, value, color }[]. Tokens: category palette [#6366F1, #0EA5E9, #16A34A, #F59E0B], radius 0.75rem. Percentages computed from the values, currency-formatted. Responsive; legend moves below the chart on mobile. Legend rows keyboard-focusable with a visible highlight on the matching segment.

Build a cohort retention heatmap card.

Product surface:
- Rows are signup-week cohorts (last 12 weeks); columns are weeks-since-signup (0–11). Each cell is the retention % for that cohort at that week, colored on a scale from light to the brand color as % rises.
- The first column shows the cohort label and its starting user count.
- Hovering a cell shows a tooltip: cohort, week N, retained users / total, and %.
- A toggle between % retention and absolute counts.

Constraints: Next.js App Router, Tailwind, shadcn/ui Card. Accept a 2D array of cohort data from a getRetentionCohorts() server action. Tokens: heat scale based on #4F46E5, radius 0.5rem. Cells are accessible — each has an aria-label with the exact numbers; keyboard users can arrow through cells. Horizontal scroll on mobile with a sticky cohort-label column.

Build an account settings page with tabbed sections.

Product surface:
- Tabs: Profile, Notifications, Security, Danger Zone.
- Profile: avatar upload, full name, email (with "verify" if unverified), timezone Select, and a Save button that's disabled until something changes.
- Notifications: toggles for product updates, weekly digest, and billing alerts, grouped with descriptions.
- Security: change password fields, a "sessions" list with device/location/last-active and a "revoke" button, and a two-factor toggle.
- Danger Zone: "Delete account" behind a typed-confirmation Dialog.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Tabs, Form, Input, Select, Switch, Dialog, Avatar). Each section saves via its own server action with zod validation and a success/error toast. Tokens: radius 0.5rem, Inter, danger #DC2626. Responsive single column on mobile; keyboard-accessible tabs and forms with visible focus.

Build a billing & subscription page for a SaaS account owner.

Product surface:
- A current-plan card: plan name, price/interval, seats used / included, next renewal date, and "Change plan" / "Cancel" buttons.
- A plan comparison Dialog with three tiers (Starter $19, Growth $49, Scale $149) showing features and a "Switch" button per tier.
- A payment method card: card brand, last 4, expiry, and "Update".
- An invoices table: date, amount, status (paid/failed) Badge, and a download link per row.
- A usage meter for the current period (e.g. API calls used / limit) with a progress bar.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card, Dialog, Table, Badge, Progress, Button). Server actions: changePlan(tier), cancelSubscription(), listInvoices(). Only role=owner can change the plan, enforced server-side. Tokens: primary #4F46E5, radius 0.75rem. Responsive; invoices table scrolls on mobile. Keyboard-accessible dialogs.

Build a team management page for inviting and managing members.

Product surface:
- A members table: avatar + name, email, role (owner/admin/member), status (active/pending invite), joined date, and a role Select + "Remove" action per row.
- An "Invite people" panel: a multi-email input (paste comma-separated), a role Select, and "Send invites"; show pending invites with a "resend" and "revoke" action.
- A seat counter: "N of M seats used" with an upgrade prompt when full.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Input, Select, Badge, Button). Server actions: inviteMembers(emails, role), updateMemberRole(id, role), removeMember(id), resendInvite(id), revokeInvite(id). Only owner/admin can invite or change roles; the last owner cannot be removed — enforce both in the server actions. Persist to Supabase `memberships` and `invites` tables. Tokens: radius 0.5rem, primary #6366F1. Responsive; keyboard-accessible.

Build an audit log viewer for admins investigating who did what.

Product surface:
- A reverse-chronological table: timestamp, actor (name + email), action (e.g. "updated user role", "deleted product"), target, IP, and a "details" expander showing the before/after JSON diff.
- Filters: date range, actor, and action type (Select), plus a free-text search over target.
- Server-side pagination (100/page) and a "Export CSV" for the current filter.

Constraints: Next.js App Router, Tailwind, shadcn/ui (Table, Select, Input, Badge, Collapsible). Data from a route handler GET /api/audit-logs querying a Postgres `audit_logs` table with the filters applied in SQL. Read-only — no way to edit or delete entries from the UI. Restrict the whole page to role=admin, enforced in the route handler and a layout guard. Tokens: mono font for the JSON diff, radius 0.5rem. Responsive; keyboard-accessible expanders.

Take my dashboard and make it role-aware for three roles: admin, manager, viewer.

Rules:
- admin: sees every widget plus the Billing and Feature Flags cards and can use all row actions.
- manager: sees operational widgets and the team table but not Billing; can edit rows but not delete.
- viewer: read-only — all charts and tables visible, but no create/edit/delete controls and no Billing.

Constraints: Next.js App Router, Tailwind, shadcn/ui. Get the role from the session in a server component and pass it down; conditionally render widgets and actions. Critically, ALSO enforce every role rule inside the server actions and route handlers — hidden UI must not be bypassable by a crafted request. Add a small helper canDo(role, action) used on both client and server. Keyboard-accessible; no layout shift between roles beyond the hidden widgets.

Build a live operations dashboard that updates in real time.

Product surface:
- KPI cards that tick live: active users right now, requests per second, error rate %, p95 latency ms — each with a "live" pulse dot and a 60-second rolling sparkline.
- A live event feed: newest events prepend to the top (level badge, message, timestamp), capped at the latest 50.
- A "requests over the last 5 minutes" line chart that scrolls as new points arrive.
- A connection status indicator (live / reconnecting / offline).

Constraints: Next.js App Router, Tailwind, shadcn/ui (Card, Badge, Chart). Subscribe to updates via Supabase Realtime (or a route handler streaming SSE) in a client component; the initial snapshot is server-rendered. Debounce re-renders so the UI stays smooth under load. Tokens: live #16A34A, error #DC2626, radius 0.75rem. Responsive; respect prefers-reduced-motion by dropping the pulse animation. Keyboard-accessible feed.

[Paste this as constraints at the top of any dashboard prompt, or send it alone in Design Mode to restyle the current build.]

Apply this design system across the dashboard:
- Color: background #0B1120 (dark) / #F8FAFC (light), surface/card one step lighter, primary #6366F1, primary-foreground #FFFFFF, positive #16A34A, warning #F59E0B, negative #DC2626, muted text #64748B.
- Typography: Inter; page title 24/700, card title 14/600 uppercase tracking-wide, metric value 30/700 tabular-nums, body 14/400.
- Shape & spacing: radius 0.75rem, card padding 20px, 16px gap between cards, subtle border #1E293B / #E2E8F0 and a soft shadow.
- Charts inherit the primary and semantic colors; grid lines are the muted border at 40% opacity.
- Support light and dark via CSS variables and a toggle. Keep contrast AA. Don't add gradients beyond chart fills.

Before writing any code, act as a product engineer and write a short PRD + build plan for a full admin panel for [product/company].

Cover:
1. The pages: Overview, Users, Billing, Content, Feature Flags, Audit Log, Settings — one sentence on the purpose and key widgets of each.
2. The data model: the Postgres/Supabase tables and key columns each page reads and writes.
3. Roles & permissions: admin / manager / viewer, and what each can do per page.
4. A component-by-component build order I can feed you one prompt at a time, starting with the app shell.

Stack: Next.js App Router, Tailwind, shadcn/ui, Supabase, server actions. Keep it concise. After I approve the plan, I'll queue the build prompts one component at a time so each generation stays small and reviewable.