Skip to content
codexa

Dashboards · React

Online store

Revenue against last year, top categories and the latest orders for an independent online shop.

Use this templateRemix
Online store starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

A store dashboard for a small linen and bedding brand: monthly revenue compared with last year, sales by category, recent orders with fulfilment status, and a feed of store events. Orders, categories and totals live in src/dashboard.ts.

Files

Exactly what is copied into a new project: 13 files, nothing generated.

Raw data: GET /api/v1/templates/dash-store

Explorer 13

src/dashboard.ts
src/dashboard.ts
import type { Dashboard } from "./types"; /** Everything this dashboard shows. Edit freely. */export const dashboard: Dashboard = {  "brand": "Hearth & Loom",  "user": {    "name": "Clara Moreno",    "role": "Founder"  },  "nav": [    {      "label": "Overview",      "icon": "home",      "href": "#overview"    },    {      "label": "Revenue",      "icon": "chart",      "href": "#trends"    },    {      "label": "Categories",      "icon": "box",      "href": "#breakdown"    },    {      "label": "Orders",      "icon": "truck",      "href": "#table"    },    {      "label": "Store log",      "icon": "clock",      "href": "#activity"    }  ],  "title": "Store overview",  "subtitle": "September 2026 compared with last year",  "ranges": [    {      "label": "Quarter",      "points": 3    },    {      "label": "Year",      "points": 12    }  ],  "kpis": [    {      "label": "Revenue",      "value": "$84,300",      "delta": "14.2%",      "up": true    },    {      "label": "Orders",      "value": "612",      "delta": "9.7%",      "up": true    },    {      "label": "Average order",      "value": "$137.75",      "delta": "$5.40",      "up": true    },    {      "label": "Return rate",      "value": "4.1%",      "delta": "0.6 pts",      "up": false,      "upIsGood": false    }  ],  "chart": {    "title": "Revenue, this year vs last",    "type": "line",    "unit": "$",    "labels": [      "Oct",      "Nov",      "Dec",      "Jan",      "Feb",      "Mar",      "Apr",      "May",      "Jun",      "Jul",      "Aug",      "Sep"    ],    "series": [      {        "name": "This year",        "values": [          61200,          66800,          92400,          58300,          54100,          60900,          63800,          68200,          71500,          70100,          73800,          84300        ]      },      {        "name": "Last year",        "values": [          52100,          58900,          81000,          50200,          47800,          52600,          55300,          58700,          60200,          61900,          64400,          70800        ]      }    ]  },  "side": {    "title": "Sales by category",    "items": [      {        "label": "Sheets",        "value": "$31,900",        "pct": 38      },      {        "label": "Duvet covers",        "value": "$22,100",        "pct": 26      },      {        "label": "Quilts",        "value": "$13,500",        "pct": 16      },      {        "label": "Towels",        "value": "$9,800",        "pct": 12      },      {        "label": "Table linen",        "value": "$7,000",        "pct": 8      }    ]  },  "table": {    "title": "Recent orders",    "columns": [      "Order",      "Customer",      "Items",      "Total",      "Status",      "Placed"    ],    "statusColumn": 4,    "tones": {      "Paid": "accent",      "Shipped": "neutral",      "Delivered": "good",      "Refunded": "bad"    },    "rows": [      [        "#10482",        "Maya Rahman",        "3",        "$264.00",        "Shipped",        "Sep 29"      ],      [        "#10481",        "Tomas Hale",        "1",        "$118.00",        "Paid",        "Sep 29"      ],      [        "#10480",        "Priya Shah",        "2",        "$196.00",        "Delivered",        "Sep 27"      ],      [        "#10479",        "Owen Byrne",        "4",        "$342.50",        "Delivered",        "Sep 27"      ],      [        "#10478",        "Lena Kovac",        "1",        "$89.00",        "Refunded",        "Sep 26"      ],      [        "#10477",        "Grace Adeyemi",        "2",        "$154.00",        "Shipped",        "Sep 26"      ],      [        "#10476",        "Felix Novak",        "5",        "$410.00",        "Delivered",        "Sep 25"      ]    ]  },  "feed": {    "title": "Store log",    "items": [      {        "text": "Washed linen sheets (Oat, King) dropped below 10 in stock",        "time": "1 hour ago"      },      {        "text": "Refund issued for #10478: wrong size duvet cover",        "time": "Yesterday"      },      {        "text": "Autumn quilt collection published (6 products)",        "time": "3 days ago"      }    ]  }};

Remix

Remix this template

Describe what to change and the agent starts from Online store's files. The box is already started for you: finish “Start from Online store and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Online store

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates