{
  "id": 12283119,
  "title": "Build an Admin Dashboard in React",
  "url": "https://urgent.news/2026/10/06/build-an-admin-dashboard-in-react",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-06T02:30:34.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/omkarsahu/build-an-admin-dashboard-in-react-5bd"
  },
  "original_language": "en",
  "account": "Building an admin dashboard in React involves creating three key components: KPI cards, a revenue chart, and a table of recent activity. These components are arranged in a layout that adapts from phone to desktop. The hardest part of creating a dashboard is not the coding process, but determining what information to display.\n\nTo decide what to show on the dashboard, apply this test: each number on the first screen should answer a question someone actually asks every day. For instance, \"How much did we sell this week?\" warrants a card. Conversely, \"Total registered users since launch\" is less useful, as it only ever increases and doesn't prompt any action.\n\nWhen designing the dashboard, limit the top row to four numbers. Each number should be accompanied by its change over a comparable period, as a number without context can't indicate whether the current situation is good or bad. Place the detail, such as the chart and the table, beneath the top row. This placement ensures users can focus on the high-level numbers first and then delve into the additional information when needed.\n\nFirst, KPI cards serve as the foundation of the dashboard. The `Stat` component displays a label, a significant value, and an optional change with a direction indicator. The direction color-codes the change pill and selects the arrow. Here's an example code snippet for creating KPI cards:\n\n```javascript\nconst kpis = [\n{ label: 'Revenue', value: '$48,210', delta: '+12.4%', trend: 'up' },\n{ label: 'Orders', value: '1,284', delta: '+3.1%', trend: 'up' },\n{ label: 'Refunds', value: '18', delta: '-2', trend: 'down' },\n{ label: 'Conversion', value: '3.2%', delta: '0.0%', trend: 'flat' },\n] as const;\n\n<div className=\"kpi-grid\">\n{kpis.map((k) => (\n<Card\nkey={k.label}\nshadow=\"sm\"\nradius=\"lg\"\nstyle={{ padding: 20 }}\n>\n<Stat\nlabel={k.label}\nvalue={k.value}\ndelta={k.delta}\ntrend={k.trend}\n/>\n</Card>\n))}\n</div>\n```\n\nNext, a revenue chart is created using the `Chart` component. This component takes rows of data, the key for the x-axis, and the series to draw. Multiple series automatically generate a legend. Here's an example of a revenue chart:\n\n```javascript\nconst revenue = [\n{ month: 'Jan', online: 12400, store: 8200 },\n{ month: 'Feb', online: 13900, store: 7900 },\n{ month: 'Mar', online: 15100, store: 8800 },\n{ month: 'Apr', online: 16800, store: 9100 },\n{ month: 'May', online: 18200, store: 9600 },\n{ month: 'Jun', online: 21000, store: 10400 },\n];\n\n<Card\nshadow=\"sm\"\nradius=\"lg\"\nstyle={{ padding: 20 }}\n>\n<Chart\ntype=\"area\"\ntitle=\"Revenue\"\n// Additional chart properties...\n/>\n</Card>\n```\n\nFinally, a table of recent activity is added beneath the KPI cards and revenue chart. This table provides additional context and detail to the user. The `Table` component, along with the `TableColumn` type, can be used to create the table structure.",
  "summary": "An admin dashboard is mostly three things: a row of numbers that matter, a chart that shows the trend, and a table of recent activity. In this tutorial we build all three with oks-ui and arrange them in a layout that works from phone to desktop. import { Card } from \" oks-ui/card \" ; import \" oks-ui/card.css \" ; import { Stat } from \" oks-ui/stat \" ; import \" oks-ui/stat.css \" ; import { Chart }…",
  "key_points": [
    "Admin dashboard built with React using KPI cards, revenue chart, and recent activity table",
    "Each KPI card displays label, value, change, and trend with color-coded indicators",
    "Revenue chart shows monthly online and store revenue with automatic legend generation"
  ],
  "editors_take": "Focusing an admin dashboard on key performance indicators that answer daily business questions enables more effective decision-making by providing users with relevant, actionable information at a glance.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}