Report Builder

A React report builder layout with an export action, a date range picker and a chart card for the selected metrics. A base for custom reporting screens.

src/registry/blocks/report-builder.tsx/r/report-builder.json

Installation#

bash

npx shadcn@latest add @minidev/report-builder

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/report-builder.json

Usage#

tsx

import { ReportBuilder } from "@/components/ui/report-builder"

export function Example() {
  return <ReportBuilder />
}

API reference#

ReportBuilder takes no props. It ships with realistic sample content: install it, then edit the copy and data in the file directly. The file is yours.

Dependencies#

npm

React only

Built from

Button Chart Card Date Range Picker Page Header

Admin ConsoleA full admin console with an impersonation banner, org switcher, KPI strip and tabs for users, SSO and IP allowlist, resource quotas and bulk user import.Admin OverviewAn admin overview section with a heading and invite action, stat tiles with deltas for seats, MRR, NPS and churn, and a recent activity feed below.Analytics PageA React analytics page with a KPI strip for installs, trials, conversions and seats, plus two chart cards showing 30 day bar trends side by side.Command CenterA React operations dashboard with a KPI row for agents, jobs, failures and latency, plus a command palette dialog opened from the header action.Dashboard HomeA React dashboard home screen with a page header and new project action, a KPI row with deltas, a 30 day active users bar chart and an activity feed.Inbox PageA Tailwind inbox panel listing messages with sender, preview line and timestamp, a New badge on unread items, and a mark all read action in the header.

All dashboard components

Learn more

All dashboards10 blocks