BJORK Cost meter

Component

About

Cost meter is a production-ready ai component from BJORK UI, packaged for shadcn registries.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds BJORK Cost meter to your project and fits it to your theme.

Code

How BJORK Cost meter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { CostMeter, SAMPLE_USAGE, type CostPeriod } from "@/components/ui/bjork-cost-meter";

function Demo({
  period,
  extra,
  onPeriodChange,
}: {
  period: CostPeriod;
  extra: number;
  onPeriodChange: (period: CostPeriod) => void;
}) {
  const isPreview = false;
  const usage = SAMPLE_USAGE.periods[period];

  if (isPreview) {
    // Posed frame: 30 days at 72% of the budget, crosshair on Oct 4.
    const p = SAMPLE_USAGE.periods["30d"];
    return (
      <div className="w-[min(520px,calc(100vw-56px))]">
        <CostMeter
          spend={p.spend}
          budget={p.budget}
          breakdown={p.breakdown}
          history={SAMPLE_USAGE.history}
          defaultPeriod="30d"
          defaultActivePoint={9}
        />
      </div>
    );
  }

  return (
    <div className="flex w-[min(520px,calc(100vw-56px))] flex-col items-stretch gap-6">
      <CostMeter
        spend={usage.spend + extra}
        budget={usage.budget}
        breakdown={usage.breakdown}
        history={SAMPLE_USAGE.history}
        period={period}
        onPeriodChange={onPeriodChange}
      />
    </div>
  );
}
function SourceDemo(){
const [period, setPeriod] = useState<CostPeriod>("30d");
const [extra, setExtra] = useState(0);
const usage = SAMPLE_USAGE.periods[period];
const reset = () => setExtra(0);
return <>

      <Demo
        period={period}
        extra={extra}
        onPeriodChange={(p) => {
          setPeriod(p);
          setExtra(0);
        }}
      />
    
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}