Usage card

$pnpm dlx shadcn@latest add @nextui/usage-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";
2
3import { UsageCard } from "@/components/blocks/usage-card";
4
5export function Billing() {
6  return (
7    <UsageCard
8      name="Northwind"
9      planLabel="Team plan · Resets in 4 days"
10      limit={20_000}
11      periods={{
12        month: {
13          label: "This month",
14          total: 12_400,
15          sources: [
16            { name: "Chat", credits: 8_000 },
17            { name: "API", credits: 4_400 },
18          ],
19          days: [400, 520, 610, 380, 450],
20          slots: 30,
21          dayLabel: (i) => `Nov ${i + 1}`,
22          seats: 6,
23          storage: 1.4,
24          projects: 9,
25        },
26      }}
27      onUpgrade={() => location.assign("/billing")}
28    />
29  );
30}