Dashboard 04
NewA lean shop dashboard on a plain top-navigation shell: three KPI cards, an orders area chart, a recent-activity list and a tasks checklist you can tick off.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/dashboard-04.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Files
What the command adds to your project, and where.
app/overview/page.tsxThe page itself, at the route it is meant for. Move or rename it to suit your app.
components/dashboard-04/activity-list.tsxA component the page imports. Edit it freely.
components/dashboard-04/icons.tsxA component the page imports. Edit it freely.
components/dashboard-04/kpi-row.tsxA component the page imports. Edit it freely.
components/dashboard-04/orders-chart.tsxA component the page imports. Edit it freely.
components/dashboard-04/shop-data.tsA component the page imports. Edit it freely.
components/dashboard-04/shop-header.tsxA component the page imports. Edit it freely.
components/dashboard-04/tasks-card.tsxA component the page imports. Edit it freely.
It also installs the components it is built from, unless you already have them: Button, Card, Checkbox, chart, Input, Toggle Group.
The block uses one accent colour. Installing adds a --brand variable to your global CSS (an existing one is left alone); change it to match your product.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Dashboard
- Dashboard 01A logistics dashboard on the sidebar shell: KPI cards, a 90-day shipments chart with a range toggle, and a sortable, filterable shipments table.
- Dashboard 02A finance dashboard for a small business: revenue KPIs, revenue against target with a month range, top customers with year-on-year change, and an invoices table that marks what is overdue.
- Dashboard 03Product analytics for a SaaS: a date range and segment chips that drive the active-users line with its comparison period, a sign-up funnel and a retention cohort heat map.