39 Pro components and page blocks

Get Pro
uibrik

Revenue Dashboard

Pro

Preview

Customize

USD

Usage

import { RevenueDashboard } from "@/components/uibrik/revenue-dashboard/revenue-dashboard";

<RevenueDashboard />

Installation

Pro

Revenue Dashboard is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/revenue-dashboard

Props

RevenueDashboard
title
Type string
"Revenue"
Page heading.
description
Type string
"Recurring revenue, conversion and payments."
One line under the heading.
currency
Type "USD" | "EUR" | "GBP" | "INR"
"USD"
ISO 4217 code for every amount.
showFunnel
Type boolean
true
Show the trial to paid funnel beside revenue by plan.
showTransactions
Type boolean
true
Show the recent transactions table.
plans
Type { key: string; label: string }[]
–
Plans in stacking order, bottom first.
months
Type { label: string; mrr: Record<string, number>; customers: number; churnRate: number }[]
–
One entry per month, oldest first. MRR per plan key; churnRate from 0 to 1.
funnel
Type { label: string; value: number }[]
–
Trial steps, first to last.
transactions
Type Transaction[]
–
Payments, newest first: { id, customer, email, avatar?, plan, amount, status, date, time?, method? }. Rows open a detail sheet with a refund action. Status is paid, pending, failed or refunded.
limit
Type number
6
Rows in the recent transactions table. View all lists every transaction in a sheet.
onExport
Type () => void
–
Called by the Export button, after its confirmation toast.
onRefund
Type (transaction: Transaction) => void
–
Called after a refund is confirmed; the row already shows Refunded.
className
Type string
–
Classes for the outer element.