A light analytics card for monthly revenue: stat numbers count up as a month-to-date chart draws in, with a goal share, a trend versus last month and a hatched channel bar with a dot legend.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/revenue-card
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { RevenueCard } from "@/components/nextui/revenue-card";45export function Example() {6return (7<RevenueCard8eyebrow="monthly"9title="Store revenue"10meta={[{ value: "1,284", label: "Orders" }, { value: "4.2%" }, { value: "$66", label: "AOV" }]}11goal={124000}12series={[3100, 15200, 27500, 38200, 52400, 66900, 84200]}13previousSeries={[2900, 13200, 23900, 34000, 45900, 57800, 71300]}14labels={["Oct 1", "Oct 5", "Oct 9", "Oct 13", "Oct 17", "Oct 21", "Oct 25"]}15channels={[16{ label: "Direct", value: 25800, tone: "ink" },17{ label: "Paid ads", value: 18600, tone: "violet" },18{ label: "Organic search", value: 39800, tone: "stripe" },19]}20fees={3120}21status="On pace for $104K"22updated="Synced 2 min ago"23/>24);25}
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "monthly" | Muted word before the title |
| title | string | "Store revenue" | Card heading; clicking it calls onOpen |
| meta | RevenueMeta[] | orders, conversion, AOV | Small figures under the title, each a bold value and an optional label |
| series | number[] | 13 sample points | Running totals plotted in the chart, oldest first |
| previousSeries | number[] | 13 sample points | Comparison period, drawn as a dashed line |
| labels | string[] | "Oct 1" … "Oct 25" | One label per point; shown on hover and under the chart |
| revenue | number | last point of series | The big headline figure |
| previous | number | last point of previousSeries | Comparison figure; picks the green up or red down trend, with the change in percent |
| goal | number | 124000 | Target; the right figure shows revenue as a share of it |
| channels | RevenueChannel[] | Direct, Paid ads, Organic search | Bar slices with label, value and tone (ink, violet or stripe); the stripe slice is the headline of the bottom half |
| fees | number | 3120 | Figure next to the coin icon |
| status | string | "On pace for $104K" | Footer status next to the live dot |
| updated | string | "Synced 2 min ago" | Muted footer text on the right |
| format | (value: number) => string | compact US dollars | Formats every money figure |
| onOpen | () => void | – | Called when the title is clicked |
| onMenu | () => void | – | Called when the ••• button is clicked |
| className | string | – | Extra class on the root |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.