A revenue overview with revenue and order KPIs, a goal progress ring, a revenue versus target combo chart, regional sales, a conversion funnel and a sortable top products table.
Fiscal year 2025 · all channels
$3.90M
43,990
$3.90M of $4.06M target
$164K to go
Monthly, in thousands
Share of revenue
From first visit to paid order
Click a column to sort
| Product | Trend | |||
|---|---|---|---|---|
AD Aero Desk LampLighting | 4,820 | $308K | 18.4% | |
FJ Fieldnote JournalStationery | 9,310 | $223K | 9.2% | |
RT Ridge Travel MugDrinkware | 6,140 | $196K | 22.7% | |
HW Halo Wireless ChargerElectronics | 3,660 | $179K | 4.1% | |
TL Tern Laptop SleeveAccessories | 2,890 | $168K | 6.5% | |
DD Drift Desk MatWorkspace | 3,310 | $129K | 1.3% |
npx shadcn@latest add https://hyperblur.dev/r/sales-dashboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sales-dashboard.tsx.
import { SalesDashboard } from "@/components/hyperblur/sales-dashboard"
<SalesDashboard currency="$" defaultPeriod="FY" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Accent color for bars, the goal ring, active nav item and focus rings. |
| brand | string | "Ledgerly" | Product name shown at the top of the sidebar. |
| user | string | "Priya Nair" | Name used for the avatar initials in the top bar. |
| currency | string | "$" | Currency symbol used in every amount. |
| period | "H1" | "H2" | "FY" | Controlled period. Pair with onPeriodChange. | |
| defaultPeriod | "H1" | "H2" | "FY" | "FY" | Initial period when uncontrolled: first half, second half or the full year. |
| onPeriodChange | (period: SalesPeriod) => void | Called when the period toggle changes. |