Admin Dashboard Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Admin Dashboard Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AdminDashboardPage from @/components/blocks/admin-dashboard-page.

// app/(admin)/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell>{children}</AdminShell>)
"use client"

import { useRouter } from "next/navigation"
import { AdminDashboardPage } from "@/components/blocks/admin-dashboard-page"

export default function HomePage() {
  const router = useRouter()
  return (
    <AdminDashboardPage
      userName="Anna"
      onCreateOrder={() => router.push("/orders/new")}
      onOrderAction={async (action, order) => {
        await fetch(`/api/orders/${order.id}/${action}`, { method: "POST" })
      }}
    />
  )
}

Props

• userNamedefault "Anna"
  string

  The name in the greeting ("Hi, Anna").

• children
  ReactNode

  Extra sections after the built-in rows (more charts, a funnel, a table), in the page column; they rise in with the rest.

• period
  DateRange

  The reporting period, controlled; pair it with onPeriodChange.

• defaultPeriod
  DateRange

  The period while uncontrolled; defaults to August 26 to September 24, 2026. A change regenerates the sample through generateDashboardData when the data props are not given.

• onPeriodChange
  (period: DateRange) => void

  Called when a complete range is applied in the date field.

• presets
  DateRangePreset[]

  The quick ranges beside the calendar ({ key, label, value }). Defaults to Last 7 days, Last 30 days, This month, Last month, This quarter and This year, measured from now.

• kpis
  DashboardKpi[]

  The four tiles ({ id, label, value, format, delta, deltaFormat, sparkline, goal, href, info, icon, tone, caption }); defaults to the sample for the period (ADMIN_DASHBOARD_SAMPLE.kpis). A null value shows a dash. Every card in the row keeps one anatomy: when any card has a sparkline the others get a flat baseline in its place, and when any has a delta the others show caption (default labels.noComparison). A zero change reads No change.

• revenue
  { date: string; current: number | null; previous: number | null }[]

  Daily revenue for the chart, ISO days; defaults to the sample for the period (ADMIN_DASHBOARD_SAMPLE.revenue).

• orders
  DashboardOrder[]

  The recent orders ({ id, number, client, date, status, payment, paid, total, items, courier, awb }); defaults to the 40 newest orders of the period (ADMIN_DASHBOARD_SAMPLE.orders).

• recent
  ReactNode

  Your own content for the recent panel (a table of payments or sign-ups); replaces the orders table. The panel keeps its title (labels.orders) and See all link (ordersHref).

• tasks
  DashboardTask[]

  The Needs attention rows ({ id, title, description, tone, href, count, icon }); defaults to ADMIN_DASHBOARD_SAMPLE.tasks. An empty list shows "All good".

• activity
  TimelineItemData[]

  The team feed with actors and times; defaults to ADMIN_DASHBOARD_SAMPLE.activity (8 items).

• topProducts
  { id; title; quantity; revenue; trend? }[]

  The Products sold table, with a 14 day sparkline from trend; defaults to the five Summit CRM products of the sample.

• comparedefault true
  boolean

  The dashed previous-period series, the revenue change and the KPI deltas.

• chartTypedefault "area"
  "area" | "line"

  The revenue chart: AreaChart, or LineChart with a soft area.

• granularity
  "day" | "week"

  The revenue grouping, controlled; pair it with onGranularityChange.

• defaultGranularitydefault "day"
  "day" | "week"

  The revenue grouping while uncontrolled; week falls back to days for periods under 14 days.

• onGranularityChange
  (granularity: DashboardGranularity) => void

  Called when the Daily / Weekly switch changes.

• showAttentiondefault true
  boolean

  The Needs attention panel beside the chart.

• attentionEmptydefault "compact"
  "compact" | "panel" (AdminDashboardPageAttentionEmpty)

  With no tasks (tasks=[]): a slim "All good" strip above the revenue row, with the chart taking the full width, or the full Needs attention panel with its empty state. With tasks the panel always shows.

• kpiIconsdefault true
  boolean

  Tinted icon tiles on the KPI cards: kpi.icon and kpi.tone, else an icon and a tone picked from the id (revenue orange, orders blue, clients green, conversion amber).

• chartTonedefault ""
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The revenue line's color. Unset, it follows tone (neutral: the chart's first series color); the previous period stays a muted dashed line.

• showActivitydefault true
  boolean

  The team activity feed.

• showTopProductsdefault true
  boolean

  The Products sold table.

• topProductsColumnsdefault "["quantity", "revenue", "trend"]"
  ("quantity" | "revenue" | "trend")[]

  The value columns of the top table, in order. The first one is the phone card's value; ["quantity"] turns it into a plain ranking (installs, views).

• ordersPageSizedefault 8
  number

  Orders per page on desktop, and per load on phones.

• onOrderAction
  (action: DashboardOrderAction, order: DashboardOrder) => (void | Promise<unknown>)

  Runs a row, bulk or sheet action (confirm, cancel or print). The status changes at once and the row shows a spinner until the promise settles; a rejection rolls it back with an error toast. Without it the page waits 900 ms and toasts.

• onExport
  (period: DateRange) => (void | Promise<unknown>)

  The Export action; a promise keeps the button loading. Without it a toast confirms the export.

• onCreateOrder
  () => (void | Promise<unknown>)

  The New order action. Without it a toast stands in for the form.

• orderSheetdefault true
  boolean

  A row click opens the order sheet; false only calls onOrderClick.

• onOrderClick
  (order: DashboardOrder) => void

  Called when a row or its View action is chosen (before the sheet opens).

• defaultOpenOrderdefault ""
  string

  An order id whose sheet is open on mount (o1042 is the one in delivery).

• ordersHrefdefault "/orders"
  string

  Where the orders panel's See all goes.

• activityHrefdefault "/activity"
  string

  Where the activity panel's See all goes.

• labels
  Partial<AdminDashboardPageLabels>

  Every visible string (English, DEFAULT_ADMIN_DASHBOARD_PAGE_LABELS; ADMIN_DASHBOARD_PAGE_LABELS_EN is the same set). Nested keys (statCard, chart, dateRange, ordersTable, table, list, timeline, orderTracker, sparkline) translate the composed items.

• localedefault "en-US"
  string

  Intl locale for numbers, money and dates.

• currencydefault "USD"
  string

  ISO 4217 code for the KPIs, the chart, the orders and the products.

• now
  Date | number

  The reference time for today, the presets and the relative times; default the live clock.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The primary actions, the KPI sparklines and goal bar, the chart's current series and the date selection.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Corner size of the KPI tiles and the panels (12 / 16 / 24px).

• loadingdefault false
  boolean

  Skeletons in the real layout: the header, the tiles, the chart, the rows and the feed.

• animateIndefault true
  boolean

  Sections rise in once when the page mounts on the client; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the panel links and the attention rows; default the surrounding LinkProvider's (the admin shell's).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<AdminDashboardPageSlot, string>>

  Classes for header, kpis, row, revenue, attention, orders, top, activity and orderSheet.

Parts

FAQ

More React blocks