ns-ui
A CPU-profile flame graph laid out in monospace cells — one row per stack depth, frame width proportional to sample count, self-vs-total time encoded as ink weight — where clicking a frame rezooms the whole graph to that subtree.
Use when showing a CALL STACK from a sampling profiler, where the depth axis is the point: row = stack depth, width = sample count, ink weight = self time, and zooming re-bases the whole graph on one subtree. Reach for treemap-ascii-partition instead when a nested hierarchy's proportions matter and there is no depth axis to preserve (it re-packs each level into rectangles), or drill-down-spines when the drill-in should be a linear stack of full pages rather than a graph that stays legible at every level.
Install
npx shadcn add https://design.helpmarq.comns-ui / flamegraph-ascii-frames
Row = stack depth, width = sample count, ink weight = share of time spent in the frame itself. Click a frame to zoom into its subtree; the breadcrumb or Escape pops back out.
| Prop | Type | Default | Description |
|---|---|---|---|
| tree? | FlameNode | — | Root of the sample tree. Totals are rolled up once, internally. |
| rowHeight? | number | — | Rows are this tall in px; also drives the graph's overall height. |
| className? | string | — | — |