shadcn.io is not affiliated with official shadcn/ui
Memory Allocation Dashboard Block for React
A 60-minute heap line that climbs and drops at each garbage collection, a fitted line through the post-GC floors that says how fast it rises and when the limit is reached, a pause strip and heap by module.
Installation
Overview
Tell a leak from a harmless sawtooth with this memory panel for React with Base UI. A hairline frame with a plus mark on each corner draws one hour of a Heapwright service's heap: a thin line that climbs as it allocates and falls at each of eight garbage collections, a dot on the floor after each one and a solid line fitted through the dots. The header turns the fit into a sentence, such as the floor rising 2.1 MB a minute and the limit being reached in about 54 minutes. A Toggle Group swaps total heap for the old generation. Under the chart a strip draws each collection as a bar as tall as its pause, and pressing one reads its pause and how much it freed. A last band lists heap by module with a share bar. It's built from Toggle Group and Guides. For runtime tooling and capacity reviews.
FAQ
How do I fill it with my heap samples?
The demo builds its 60 samples from a seeded formula so the page looks the same every time. Replace TOTAL_SAMPLES and OLD_SAMPLES with your per-minute heap in MB, list the minutes the collector ran in GC_MINUTES with their pauses in PAUSES, and set each series' limit. The floors, the fit, the sentence and the table are worked out from those.
How does it decide it is a leak?
It takes the heap right after each collection, fits a least-squares line through those floors and reads its slope. A slope under 0.5 MB a minute counts as flat and the header says it is a sawtooth. Above that, it divides the room left under the limit by the slope to give the minutes remaining. It is a straight-line estimate, not a forecast.
What does the pause strip show?
Each bar sits at the minute a collection ran and is as tall as its stop-the-world pause. Pressing a bar reads the pause, the MB freed and the floor in the status line, and pressing it again clears the choice. Every bar is a named button, and the same figures are in a hidden table.