Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Memory Allocation Dashboard Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Tell a leak from a harmless sawtooth with this memory panel for Svelte with Ark 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.

What stays local, and how do I wire it for real?

Everything: no heap is measured. Feed the samples from your runtime's GC log or metrics endpoint, keep the minutes in UTC, and put your container's memory limit in limit.

How does it look on a phone?

The chart is shorter, the strip sits under it at full width, and the module table drops its share bars and keeps the module and the megabytes.