Clip Library Window
Overview
A clipboard library in a dark frosted app window: search box and tool buttons on top, category tags that filter text, color and asset cards, live filtering as you type, a Copied toast when you click any card, and cards floating in one after another.
Taken from the page template Suitie Mac Clipboard History 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 Clip Library 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 clip-library-window
mcp › Use 8pt MCP to call get_component("clip-library-window")
Code
Source for Clip Library Window. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-clw"><div class="x-clw__top"><span class="x-clw__dots"><i></i><i></i><i></i></span><label class="x-clw__search"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M16 16l4 4"/></svg><input type="text" placeholder="搜索剪贴板…" aria-label="搜索剪贴板"></label><span class="x-clw__tools"><button type="button" aria-label="文字识别"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2"/><path d="M16 4h2a2 2 0 0 1 2 2v2"/><path d="M20 16v2a2 2 0 0 1-2 2h-2"/><path d="M8 20H6a2 2 0 0 1-2-2v-2"/><path d="M8 9.5h8"/><path d="M8 12.5h8"/><path d="M8 15.5h5"/></svg></button><button type="button" aria-label="提醒"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 1.5H5l1.5-1.5z"/><path d="M10 20.5a2 2 0 0 0 4 0"/></svg></button></span></div><div class="x-clw__tabs" role="tablist"><button type="button" role="tab" class="x-clw__tab" aria-selected="true" data-tab="全部">全部</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="提示词">提示词</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="颜色">颜色</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="素材">素材</button><button type="button" role="tab" class="x-clw__tab" aria-selected="false" data-tab="灵感">灵感</button><button type="button" class="x-clw__add" aria-label="新建分类"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg></button></div><div class="x-clw__grid"><button type="button" class="x-clw__card x-clw__card--text" data-cat="提示词"><p class="x-clw__txt">把这段需求改写成三条简洁的产品卖点，语气轻松一点</p><span class="x-clw__meta"><i class="x-clw__app x-clw__app--text"></i>备忘录<em>刚刚</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="素材"><img class="x-clw__img" src="https://8pt.dev/api/media/8e6f25d539248382e1d6566f.webp" alt="雕塑参考图" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>浏览器<em>刚才</em></span></button><button type="button" class="x-clw__card x-clw__card--color" data-cat="颜色"><span class="x-clw__sw" style="--c:#3D7BFF"><b>#3D7BFF</b></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--color"></i>取色器<em>稍早</em></span></button><button type="button" class="x-clw__card x-clw__card--link" data-cat="灵感"><span class="x-clw__lnk"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/></svg><b>极简排版的作品集网站</b><i>example.com</i></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--link"></i>浏览器<em>今天上午</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="素材"><img class="x-clw__img" src="https://8pt.dev/api/media/be43d5925404789ab004491c.webp" alt="耳机主图" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>设计工具<em>今天上午</em></span></button><button type="button" class="x-clw__card x-clw__card--text" data-cat="提示词"><p class="x-clw__txt">给这张海报写一句不超过十个字的标题</p><span class="x-clw__meta"><i class="x-clw__app x-clw__app--text"></i>聊天<em>今天</em></span></button><button type="button" class="x-clw__card x-clw__card--color" data-cat="颜色"><span class="x-clw__sw" style="--c:#FF7A45"><b>#FF7A45</b></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--color"></i>设计工具<em>今天</em></span></button><button type="button" class="x-clw__card x-clw__card--image" data-cat="灵感"><img class="x-clw__img" src="https://8pt.dev/api/media/d831459c499979c8a5e4d570.webp" alt="绿植桌面" draggable="false"><span class="x-clw__meta"><i class="x-clw__app x-clw__app--image"></i>相册<em>昨天</em></span></button><button type="button" class="x-clw__card x-clw__card--code" data-cat="提示词"><code class="x-clw__code">git commit -m "修复分类排序"</code><span class="x-clw__meta"><i class="x-clw__app x-clw__app--code"></i>终端<em>昨天</em></span></button><button type="button" class="x-clw__card x-clw__card--link" data-cat="灵感"><span class="x-clw__lnk"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M10 14a4 4 0 0 0 5.7 0l2.8-2.8a4 4 0 0 0-5.7-5.7L11.5 6.8"/><path d="M14 10a4 4 0 0 0-5.7 0l-2.8 2.8a4 4 0 0 0 5.7 5.7l1.3-1.3"/></svg><b>暖色调界面配色合集</b><i>example.com</i></span><span class="x-clw__meta"><i class="x-clw__app x-clw__app--link"></i>浏览器<em>昨天</em></span></button></div><div class="x-clw__toast" role="status"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>已复制，随处可贴</div></div>
.x-clw{box-sizing:border-box;position:relative;width:100%;max-width:1080px;margin:0 auto;padding:14px 16px 18px;border-radius:22px;background:rgba(22,22,26,.94);color:#f3f3f5;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 90px -30px rgba(10,20,60,.65);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.x-clw *,.x-clw *::before,.x-clw *::after{box-sizing:border-box}.x-clw svg{width:1em;height:1em;flex:none}.x-clw__top{display:flex;align-items:center;gap:14px}.x-clw__dots{display:flex;gap:7px}.x-clw__dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.x-clw__dots i:nth-child(2){background:#febc2e}.x-clw__dots i:nth-child(3){background:#28c840}.x-clw__search{flex:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:11px;background:rgba(255,255,255,.07);color:#9a9aa3;font-size:15px}.x-clw__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:#fff;font:inherit;font-size:13px}.x-clw__search input::placeholder{color:#8a8a93}.x-clw__tools{display:flex;gap:6px}.x-clw__tools button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:#d6d6dc;font-size:16px;cursor:pointer}.x-clw__tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 14px}.x-clw__tab{height:32px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.07);color:#cfcfd6;font:inherit;font-size:13px;cursor:pointer;transition:background .2s,color .2s}.x-clw__tab:hover{background:rgba(255,255,255,.12)}.x-clw__tab[aria-selected="true"]{background:#fff;color:#0b0b0f;font-weight:600}.x-clw__add{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#cfcfd6;font-size:15px;cursor:pointer}.x-clw__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.x-clw__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;height:168px;padding:10px;border:0;border-radius:16px;background:#2a2a30;color:inherit;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s,box-shadow .2s;animation:x-clw-in .6s cubic-bezier(.2,.8,.2,1) both}.x-clw__card:nth-child(2){animation-delay:.05s}.x-clw__card:nth-child(3){animation-delay:.1s}.x-clw__card:nth-child(4){animation-delay:.15s}.x-clw__card:nth-child(5){animation-delay:.2s}.x-clw__card:nth-child(6){animation-delay:.25s}.x-clw__card:nth-child(7){animation-delay:.3s}.x-clw__card:nth-child(8){animation-delay:.35s}.x-clw__card:nth-child(9){animation-delay:.4s}.x-clw__card:nth-child(10){animation-delay:.45s}@keyframes x-clw-in{from{opacity:0;transform:translateY(12px) scale(.97)}}.x-clw__card:hover{transform:translateY(-3px);box-shadow:0 0 0 2px rgba(61,123,255,.8)}.x-clw__card.is-hide{display:none}.x-clw__card.is-copied{box-shadow:0 0 0 2px #28c840}.x-clw__txt{margin:0;font-size:13px;line-height:1.55;color:#e9e9ee;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.x-clw__img{flex:1;min-height:0;width:100%;object-fit:cover;border-radius:10px}.x-clw__sw{flex:1;display:flex;align-items:flex-end;padding:10px;border-radius:10px;background:var(--c)}.x-clw__sw b{font-size:13px;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}.x-clw__lnk{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:linear-gradient(160deg,#3b3b44,#2f2f36)}.x-clw__lnk svg{font-size:18px;color:#8fb6ff}.x-clw__lnk b{font-size:13px;font-weight:600;line-height:1.4}.x-clw__lnk i{font-style:normal;font-size:11px;color:#8a8a93}.x-clw__code{flex:1;padding:10px;border-radius:10px;background:#141418;color:#9fe6a8;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:hidden}.x-clw__meta{display:flex;align-items:center;gap:6px;font-size:11px;color:#a1a1aa}.x-clw__meta em{margin-left:auto;font-style:normal;color:#77777f}.x-clw__app{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#ffd36b,#ff9f43)}.x-clw__app--image{background:linear-gradient(135deg,#7bd3ff,#3d7bff)}.x-clw__app--color{background:conic-gradient(#ff6b6b,#ffd36b,#6bff95,#6bc7ff,#b36bff,#ff6b6b)}.x-clw__app--link{background:linear-gradient(135deg,#6be3ff,#2fa7ff)}.x-clw__app--code{background:#0d0d10;box-shadow:inset 0 0 0 1px #3a3a40}.x-clw__toast{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;background:#fff;color:#0b0b0f;font-size:13px;font-weight:600;box-shadow:0 14px 40px -10px rgba(0,0,0,.5);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}.x-clw__toast svg{color:#28c840}.x-clw__toast.is-show{opacity:1;transform:translate(-50%,0)}@media (max-width:900px){.x-clw__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.x-clw__card:nth-child(n+7){display:none}}@media (max-width:560px){.x-clw__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.x-clw__card{height:150px}.x-clw__card:nth-child(n+5){display:none}.x-clw__tools{display:none}}@media (prefers-reduced-motion:reduce){.x-clw__card{animation:none;transition:none}.x-clw__toast{transition:none}}(root) => {
const tabs = [...root.querySelectorAll('.x-clw__tab')];
const cards = [...root.querySelectorAll('.x-clw__card')];
const toast = root.querySelector('.x-clw__toast');
const input = root.querySelector('.x-clw__search input');
let cur = '全部', t = 0;
const apply = () => {
const q = input.value.trim().toLowerCase();
cards.forEach(c => {
const okTab = cur === '全部' || c.dataset.cat === cur;
const okQ = !q || c.textContent.toLowerCase().includes(q);
c.classList.toggle('is-hide', !(okTab && okQ));
…Subscribe to Builder to see the full source.See pricing