Metrics overview.
Three useful numbers and an activity chart that responds to a period change.
THE BIG PICTURE
A good rhythm.
Live interface · sample data · state resets on reload
GET STARTED
The source is yours.
npx shadcn@latest add https://ui.bld8.dev/r/metrics.jsonInstall into an existing application, or download the complete starter below.
Download the starter, unzip it and run the commands below. It includes a Next.js app, both BLD8 packages and their editable source. No BLD8 npm installation is needed.
npm install
npm run devOpen http://localhost:3000. Node 22 and React 19 are used. Import MetricsOverview from @bld8/blocks in your own composition.
NOTES TO SELF
A clear starting point.
Week and month selections show illustrative fixtures. Replace those fixtures with your analytics data; no analytics service is included.
Both collections use the MIT licence. Personal and commercial use are allowed; keep the licence notice when sharing the code.
About the collections Source manifest