Disk Cleanup Panel
A segmented storage bar with a grouped checklist: Safe to remove is checked by default, Your call is not. Checking items resizes the striped segments live; moving to Trash gives back disk space, and one click undoes it.
Taken from the page template Nook Mac App Website. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Disk Cleanup Panel to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
Code
Source for Disk Cleanup Panel. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-nkc">
<div class="x-nkc__win" style="width:540px;height:470px">
<div class="x-nkc__tb"><span class="x-nkc__lt" aria-hidden="true"><i></i><i></i><i></i></span><b>Smart cleanup</b><button class="x-nkc__ag" type="button">Watch again</button></div>
<div class="x-nkc__bd"></div>
<div class="x-nkc__toast" role="status"><span></span><button type="button">Revoke</button></div>
</div>
</div>.x-nkc{position:relative;flex:none}
.x-nkc__win{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 28px 70px rgba(10,20,80,.28);font:13px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Microsoft YaHei',sans-serif;color:#1D1D1F;text-align:left;-webkit-font-smoothing:antialiased}
.x-nkc__tb{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.07)}
.x-nkc__tb b{font-size:14.5px}
.x-nkc__lt{display:flex;gap:7px}.x-nkc__lt i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-nkc__lt i:nth-child(2){background:#FEBC2E}.x-nkc__lt i:nth-child(3){background:#28C840}
.x-nkc__ag{margin-left:auto;height:26px;padding:0 10px;border:0;border-radius:7px;background:#fff;color:#6E6E73;font:inherit;font-size:12px;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.09)}
.x-nkc__bd{flex:1;display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.x-nkc__hd{display:flex;align-items:flex-end;gap:10px}.x-nkc__hd b{font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}.x-nkc__hd span{padding-bottom:4px;font-size:12px;color:#6E6E73}
.x-nkc__gain{margin-left:auto;padding:3px 9px!important;border-radius:99px;background:#E3F6EA;color:#157A3A!important;font-weight:600;opacity:0;transition:opacity .3s}.x-nkc__gain.on{opacity:1}
.x-nkc__bar{display:flex;gap:2px;height:20px;border-radius:7px;overflow:hidden;background:#E9E9EE}
.x-nkc__bar i{height:100%;width:var(--w);background:var(--c);transition:width .7s cubic-bezier(.16,1,.3,1)}
.x-nkc__bar .cl{background:repeating-linear-gradient(-45deg,#F4A340 0 4px,#F7BD70 4px 8px)}
…const init = (root) => {
const fit = (box, W, H) => {
const inner = box.firstElementChild;
const run = () => {
const cs = getComputedStyle(root);
const aw = root.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
const ah = root.clientHeight - parseFloat(cs.paddingTop) - parseFloat(cs.paddingBottom);
if (aw <= 0 || ah <= 0) return;
const s = Math.max(0.2, Math.min(aw / W, ah / H, 1));
box.style.width = W * s + 'px'; box.style.height = H * s + 'px'; inner.style.transform = `scale(${s})`;
};
const ro = new ResizeObserver(run); ro.observe(root); run();
…