shadcn.io is not affiliated with official shadcn/ui
Request Payload Size Histogram Block for React
A 24-bucket log histogram of request and response sizes from 100 bytes to 16 MB with a 1 MB limit line, a Request, Response or Both toggle, bucket readings and a sortable table of endpoints by p99 size.
Installation
Overview
See how big the bodies crossing your gateway are against its limit with this size panel for React with Base UI. It is Heftwell, an API payload analyzer, and its header is worked out from the counts: how many bodies are over the 1 MB limit and what share that is. A hairline frame holds a histogram of 24 log-spaced buckets, the 1 MB limit drawn as a line and the buckets past it solid. A Toggle Group switches between request bodies, response bodies and both. The buckets are one radio group and the chosen one reads its count and its largest endpoint. Under it a table ranks six endpoints by p99 size with their compression ratio and the number of bodies over the limit; the column heads sort it. Guides draw the frame and its bands; the entrance is CSS only. For API gateways, upload services and anything with a body size limit.
FAQ
How do I use my own sizes?
Edit REQUESTS and RESPONSES (a count per bucket), TOP_REQ and TOP_RES (the largest endpoint per bucket) and ENDPOINTS (p99, ratio and over-limit counts). LIMIT_BUCKET is the first bucket past the limit; the over-limit total and share are derived.
Why are the bars on a log scale?
Counts span five orders of magnitude, so a linear scale would hide the large bodies that matter. Heights use ln(1 + count) over ln(1 + the biggest); the counts are exact in the reading.
How do I use it with a keyboard?
The buckets are a radio group: Tab enters it and the arrow keys move between buckets. The table heads are buttons with aria-sort.