shadcn.io is not affiliated with official shadcn/ui
Function Invocations Dashboard Block for React
Seven serverless functions with their monthly cost, a cold against warm duration histogram for the one you choose and a memory table that marks the cheapest size and says what a different size saves a month.
Installation
Overview
Right-size a serverless function before the bill arrives, with this invocations panel for React with Base UI. A hairline frame with a plus mark on each corner holds a table of seven Matchstrike functions, each with its monthly invocations, average duration, memory and monthly cost. Choosing one fills the side cell with its duration histogram split into cold and warm starts, and a memory table for 128, 256, 512, 1,024 and 2,048 MB with the typed average duration at each size and the cost a month, worked out as invocations times duration times memory times one rate, with the cheapest size marked. Choosing a size says what it would save or cost against the current one, such as "Saves $41 a month". The header adds up the saving if every function took its cheapest size. It's built from native radio buttons and Guides, with CSS entrances only. For serverless consoles, cost reviews and platform teams.
FAQ
How do I fill it with my own functions?
Edit FUNCTIONS. Each has a name, a runtime, invocations a month in millions, the memory it runs with now, the average duration in ms at each of the five SIZES, and two histograms of thousands of invocations, warm and cold, in buckets bucket ms wide. Costs, savings, cold-start shares and the header total are worked out from those.
How is the monthly cost worked out?
Invocations, times the average duration in seconds, times the memory in GB, times RATE, a price per GB-second you set once at the top of the file. It ignores per-request fees and free tiers, which differ between platforms, so use it to compare sizes of one function rather than to predict an invoice.
Is the cheapest size always the best one?
No. It's the cheapest, not the fastest: a small size can cost least and still take seconds. The duration for every size is in the table next to its cost so you can weigh the two, and the histogram shows how many invocations are cold starts.
What stays local, and how do I wire it for real?
Everything: the durations and counts are typed, and choosing a size changes only what the panel says. To use real data, take durations from a power-tuning run at each size and the histograms from your platform's logs, then set the memory in your function's own configuration.
Can I use it without a pointer?
Yes. Each function's name is a real button in a table with a caption and row headers, the sizes are radio buttons you move through with the arrow keys, the cheapest one has a hidden word as well as a check, the histogram has a text label with its cold-start share, and a polite status line reads the result.