Mac File Window
Overview
A native-feeling Mac file manager window: sidebar, grouping switch (none / kind / date) and colorful file icons. Click Tidy and loose files fly into sorted folders, with an undo toast at the bottom.
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 Mac File Window 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.
$ npm i -g @8pt-dev/cli && 8pt add mac-file-window
mcp › Use 8pt MCP to call get_component("mac-file-window")
Code
Source for Mac File Window. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-nkw">
<div class="x-nkw__win" style="width:720px;height:440px">
<aside class="x-nkw__sb">
<div class="x-nkw__lt" aria-hidden="true"><i></i><i></i><i></i></div>
<div class="x-nkw__ap"><svg viewBox="0 0 64 64" aria-hidden="true"><rect x="2" y="2" width="60" height="60" rx="15" fill="#3D5BF0"/><path d="M14 23a4 4 0 0 1 4-4h9.5l4 4H46a4 4 0 0 1 4 4v14H14z" fill="#fff" fill-opacity=".42"/><rect x="12" y="28" width="40" height="21" rx="5.5" fill="#fff"/><rect x="19" y="35" width="15" height="3.2" rx="1.6" fill="#3D5BF0"/></svg>Nook</div>
<h6>Workspace</h6><a><i style="--c:#7B61E8"></i>New launch</a><a><i style="--c:#D9467A"></i>Kyoto trip</a>
<h6>Personal favorites</h6><a><i style="--c:#3D5BF0"></i>Desktop</a><a><i style="--c:#3D5BF0"></i>Documents</a><a class="on"><i style="--c:#3D5BF0"></i>Downloads</a>
<h6>Tool</h6><a><i style="--c:#E08A1E"></i>Reclaim space</a><a><i style="--c:#2E9E5B"></i>Installed<em>49</em></a>
<div class="x-nkw__dsk">MacBook Air<span>Remaining 147.8 GB</span><b></b></div>
</aside>
<div class="x-nkw__mn">
<div class="x-nkw__tb">
….x-nkw{position:relative;flex:none}
.x-nkw__win{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;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-nkw__sb{flex:none;width:158px;margin:8px 0 8px 8px;padding:12px 8px;border-radius:12px;background:rgba(243,243,247,.97);border:1px solid rgba(0,0,0,.07);display:flex;flex-direction:column;gap:1px}
.x-nkw__lt{display:flex;gap:7px;padding:0 6px 10px}.x-nkw__lt i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-nkw__lt i:nth-child(2){background:#FEBC2E}.x-nkw__lt i:nth-child(3){background:#28C840}
.x-nkw__ap{display:flex;align-items:center;gap:7px;padding:0 6px 2px;font-weight:700}.x-nkw__ap svg{width:18px;height:18px}
.x-nkw__sb h6{margin:9px 6px 3px;font-size:10.5px;font-weight:600;color:#8E8E93}
.x-nkw__sb a{display:flex;align-items:center;gap:8px;height:25px;padding:0 6px;border-radius:7px;font-size:12.5px;white-space:nowrap}
.x-nkw__sb a i{width:12px;height:10px;border-radius:2px 3px 3px 3px;background:var(--c);opacity:.85}
.x-nkw__sb a.on{background:rgba(0,0,0,.06);font-weight:600}
.x-nkw__sb a em{margin-left:auto;font-style:normal;font-size:11px;color:#8E8E93}
.x-nkw__dsk{margin-top:auto;padding:6px;font-size:11.5px}.x-nkw__dsk span{display:block;font-size:10.5px;color:#8E8E93}.x-nkw__dsk b{display:block;height:4px;margin-top:6px;border-radius:2px;background:linear-gradient(90deg,#3D5BF0 40%,#E1E2EA 40%)}
.x-nkw__mn{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
…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();
…Subscribe to Builder to see the full source.See pricing