# FinOps Cost > A cost page for servers with KPI tiles against last month, a budget meter, per-server price and CPU, memory and disk use with rightsizing hints, cost by category, and manual line items you can add and remove. Source: https://docs.nasaqui.com/components/finops-cost ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/finops-cost.json ``` The money side of a server fleet. It has no backend: pass the servers, extra items and (optionally) a daily history, and handle the add, remove and plan-change callbacks. - KPI tiles (`MetricTiles`): monthly total against last month, servers, extra items, possible savings. - A budget meter that warns from 90 percent and turns danger over the budget. - A server table with price and CPU, memory and disk use (`Meter`) and a rightsizing hint. Both CPU and memory under 25 percent suggests a smaller plan. CPU or memory above 85 percent, or disk above 90, suggests a bigger one. The row menu offers the plan switch when `onChangePlan` is passed. - Cost by category (`BreakdownTable`) and an optional daily chart (`TimeSeriesPanel`). - Manual line items with an add dialog and a remove confirmation. Yearly items count as one twelfth, one time items are listed but not counted. ## When to use - The cost page of a hosting or ops console, or a server detail cost tab. ## When not to use - AI token spend: use `AiUsageCost`. - Invoices and payments: this is a run-rate view. ## Import ```tsx import { FinopsCost } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { FinopsCost, type CostServer } from "@fadymondy/nasaq/web"; declare const servers: CostServer[]; export function Costs() { return ; } ``` ## API `FinopsCost` takes the `div` props except `children` and `title`, plus: | Prop | Type | Default | Description | | --- | --- | --- | --- | | `servers` | `CostServer[]` | required | `{ id, name, plan, region?, monthlyPrice, usage: { cpu, memory, disk }, smallerPlan?, largerPlan? }`. Usage is 0 to 100. Plans are `{ name, monthlyPrice }`. | | `items` | `CostItem[]` | `[]` | `{ id, name, category?, amount, period }`. Period: `monthly`, `yearly`, `once`. | | `currency` | `string` | `USD` | ISO 4217 code. | | `previousTotal` | `number` | | Adds the change against last month. | | `budget` | `number` | | Monthly budget. | | `history` | `TimeSeriesPoint[]` | | `{ date, cost }` per day. | | `onAddItem` | `(input) => Promise` | | Shows the add button. | | `onRemoveItem` | `(id) => Promise` | | Adds Remove to the row menu. | | `onChangePlan` | `(serverId, plan) => Promise` | | Adds the plan switch to the row menu. | | `loading`, `error`, `onRetry`, `labels` | | | States and string overrides. | ## Accessibility Each meter is named with the metric and server. Hints are text, not only colour. The remove action asks first. ## RTL and languages English and Arabic. Money is formatted for the locale with Latin digits. Server and plan names stay left to right. ## Code ### React ```tsx import { FinopsCost, type CostServer } from "@fadymondy/nasaq/web"; declare const servers: CostServer[]; export function Costs() { return ; } ``` ### shadcn ```tsx import { FinopsCost, type CostServer } from "@/components/ui/finops-cost"; declare const servers: CostServer[]; export function Costs() { return ; } ``` ### Vue ```vue ``` ### Blade ```blade @php $servers = [ ['id' => 's1', 'name' => 'web-1', 'plan' => 'CPX31', 'region' => 'fsn1', 'monthlyPrice' => 15.4, 'usage' => ['cpu' => 12, 'memory' => 18, 'disk' => 40], 'smallerPlan' => ['name' => 'CPX21', 'monthlyPrice' => 8.5]], ['id' => 's2', 'name' => 'db-1', 'plan' => 'CPX41', 'region' => 'fsn1', 'monthlyPrice' => 28, 'usage' => ['cpu' => 91, 'memory' => 72, 'disk' => 60], 'largerPlan' => ['name' => 'CPX51', 'monthlyPrice' => 55]], ['id' => 's3', 'name' => 'worker-1', 'plan' => 'CPX21', 'region' => 'nbg1', 'monthlyPrice' => 8.5, 'usage' => ['cpu' => 45, 'memory' => 50, 'disk' => 30]], ]; $items = [ ['id' => 'i1', 'name' => 'Domain renewal', 'category' => 'Domains', 'amount' => 24, 'period' => 'yearly'], ['id' => 'i2', 'name' => 'Backups', 'category' => 'Storage', 'amount' => 6, 'period' => 'monthly'], ]; $history = []; for ($i = 0; $i < 14; $i++) { $history[] = ['date' => date('Y-m-d', strtotime('2026-09-15 +'.$i.' days')), 'cost' => 2 + ($i % 5) * 0.3]; } @endphp ``` ### HTML + Alpine ```html

Costs

What the servers and extra items cost each month.

Monthly total
$59.90
-14.4% vs last month ยท was $70.00
Servers
$51.90
Extra items
$8.00
Possible savings
$6.90
Budget

Cost over time

Daily cost.
Total $35.80

Servers

Price and average use per server. Hints come from CPU and memory use.
Details
Actions

Cost by category

Monthly cost grouped by kind.
Category
Monthly cost
Servers
$51.90
Storage
$6.00
Domains
$2.00

Extra items

Costs that are not servers: domains, licences, backups, support.
Actions
```