Prodular UI

Dashboard

Pro

A finance overview inside the app shell: KPI strip with sparklines, revenue against the previous period, one AI insight, recent invoices and an activity feed.

Open full screen
Dashboard screen from Prodular UI

Install

The screen lands in app/dashboard/ with every component it uses. Change it like any other code in your app. It is part of Prodular UI Pro, so run npx prodular-ui login first. See pricing.

npx prodular-ui add dashboard

States

The screen ships with 5 states. Pick one with the tabs above the preview, with ?state= in the URL, or with the state prop from your app.

  • Default
  • Empty
  • Loading
  • Error
  • No access

Files

  • app/dashboard/page.tsx
  • app/dashboard/states.tsx
  • app/dashboard/app-shell.tsx
  • app/dashboard/data.ts