Skip to content

Stack Trace Panel

A copy-paste code & terminal component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Code & TerminalHTMLCSSany framework
TypeError: Cannot read properties of undefined
renderUsersrc/components/User.tsx:24:9
renderListsrc/components/List.tsx:12:3
Appnode_modules/react-dom/index.js:1

Copy into your project

HTML
<!-- Stack Trace Panel — the app-code frame (.is-hl) is highlighted lime with a soft pulsing inset glow -->
<div class="nuda-ct2-stack-trace">
  <div class="nuda-ct2-stack-trace__err">TypeError: Cannot read properties of undefined</div>
  <div class="nuda-ct2-stack-trace__frame is-hl">
    <span class="nuda-ct2-stack-trace__fn">renderUser</span>
    <span class="nuda-ct2-stack-trace__loc">src/components/User.tsx:24:9</span>
  </div>
  <div class="nuda-ct2-stack-trace__frame">
    <span class="nuda-ct2-stack-trace__fn">renderList</span>
    <span class="nuda-ct2-stack-trace__loc">src/components/List.tsx:12:3</span>
  </div>
  <div class="nuda-ct2-stack-trace__frame">
    <span class="nuda-ct2-stack-trace__fn">App</span>
    <span class="nuda-ct2-stack-trace__loc">node_modules/react-dom/index.js:1</span>
  </div>
</div>
CSS
.nuda-ct2-stack-trace {
  width: 300px;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 11px 13px;
  font: 500 11px ui-monospace,SFMono-Regular,Menlo,monospace;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nuda-ct2-stack-trace__err {
  color: #ff8383;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nuda-ct2-stack-trace__frame {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  color: #777;
}

.nuda-ct2-stack-trace__fn {
  color: #9a9aa2;
}

.nuda-ct2-stack-trace__loc {
  color: #4b4b52;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nuda-ct2-stack-trace__frame.is-hl {
  border-left-color: #e4ff54;
  background: rgba(228,255,84,.07);
  animation: _nuda-ct2stacktraceglow 2.2s ease-in-out infinite;
}

.nuda-ct2-stack-trace__frame.is-hl .nuda-ct2-stack-trace__fn {
  color: #e4ff54;
  font-weight: 700;
}

.nuda-ct2-stack-trace__frame.is-hl .nuda-ct2-stack-trace__loc {
  color: #cfcfcf;
}

@keyframes _nuda-ct2stacktraceglow {
  0%,100% {
    box-shadow: inset 0 0 0 rgba(228,255,84,0);
  }
  50% {
    box-shadow: inset 2px 0 8px -4px rgba(228,255,84,.7);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ct2-stack-trace__frame.is-hl {
    animation: none;
  }
}

How to use Stack Trace Panel

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More code & terminal components

← Browse all NudaUI components