{
    "id": "bhaskar/sliding-indicator-tabs",
    "kind": "component",
    "title": "Sliding Indicator Tabs",
    "summary": "Four tab styles, pill, scrollable overflow, segment and icon on selected, each with a blue indicator that slides between tabs.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/sliding-indicator-tabs/",
    "stack": [],
    "tools": [
        "claude-code"
    ],
    "difficulty": "beginner",
    "license": "cc-by-4.0",
    "version": "1.0",
    "overview": "",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Navigation",
        "html": "<div class=\"tb\"><p class=\"k\">Pill</p><div class=\"tl\" data-p=\"Overview|High-level summary.|Activity|Recent events and updates.|Settings|Preferences and access.\"><div class=\"sc\"><i class=\"ind\"></i><button class=\"t on\">Overview</button><button class=\"t\">Activity</button><button class=\"t\">Settings</button></div></div><p class=\"note\">High-level summary.</p><p class=\"k\">Overflow</p><div class=\"tl ov\"><div class=\"sc\"><i class=\"ind\"></i><button class=\"t on\">Overview</button><button class=\"t\">Activity</button><button class=\"t\">Analytics</button><button class=\"t\">Members</button><button class=\"t\">Billing</button></div><button class=\"nx\" aria-label=\"Scroll\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 6l6 6-6 6\"/></svg></button></div><p class=\"k\">Segment</p><div class=\"tl sg\"><div class=\"sc\"><i class=\"ind\"></i><button class=\"t on\">Day</button><button class=\"t\">Week</button><button class=\"t\">Month</button></div></div><p class=\"k\">Icon on selected</p><div class=\"tl ic\"><div class=\"sc\"><i class=\"ind\"></i><button class=\"t on\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 11l8-7 8 7v9H4z\"/></svg>Home</button><button class=\"t\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 19V9M12 19V5M19 19v-7\"/></svg>Stats</button><button class=\"t\"><svg viewBox=\"0 0 24 24\"><path d=\"M6 17V11a6 6 0 0112 0v6l2 2H4z\"/></svg>Alerts</button></div></div></div>",
        "css": ".tb{width:320px;font-family:system-ui,-apple-system,sans-serif;color:#e5e5e5;display:grid;gap:7px}.k{margin:8px 0 0;font:700 10px/1 inherit;letter-spacing:.08em;text-transform:uppercase;color:#7a7a7a}.note{margin:0 0 2px;font-size:13px;color:#8a8a8a}.tl{position:relative;display:inline-flex;max-width:100%;border-radius:999px;background:#1d1d1d;padding:3px}.tl.sg{border-radius:10px}.tl.sg .ind{border-radius:8px}.tl.ov{width:236px;overflow:hidden}.sc{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}.sc::-webkit-scrollbar{display:none}.ind{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:999px;background:#0a84ff;transition:transform .4s cubic-bezier(.3,1.1,.4,1),width .4s cubic-bezier(.3,1.1,.4,1)}.t{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:#8f8f8f;font:600 13px/1 inherit;padding:10px 16px;cursor:pointer;transition:color .25s}.t:hover{color:#ddd}.t.on{color:#fff}.t svg{width:0;opacity:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:-6px;transition:width .3s,opacity .3s,margin .3s}.t.on svg{width:14px;opacity:1;margin-right:0}.nx{position:absolute;right:0;top:0;bottom:0;width:34px;border:0;color:#fff;cursor:pointer;background:linear-gradient(90deg,transparent,#1d1d1d 55%);border-radius:0 999px 999px 0;display:grid;place-items:center}.nx svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}",
        "js": "(function(){function mk(g){var sc=g.querySelector('.sc'),ind=g.querySelector('.ind'),bs=sc.querySelectorAll('.t');function pos(){var a=sc.querySelector('.t.on');if(!a||!a.offsetWidth)return;ind.style.width=a.offsetWidth+'px';ind.style.transform='translateX('+a.offsetLeft+'px)'}bs.forEach(function(b){b.onclick=function(){bs.forEach(function(x){x.classList.toggle('on',x===b)});pos();if(g.dataset.p){var a=g.dataset.p.split('|');for(var i=0;i<a.length;i+=2){if(a[i]===b.textContent){document.querySelector('.note').textContent=a[i+1]}}}b.scrollIntoView({inline:'nearest',block:'nearest'})}});var nx=g.querySelector('.nx');if(nx){nx.onclick=function(){sc.scrollBy({left:110})}}pos();if(window.ResizeObserver)new ResizeObserver(pos).observe(g);setTimeout(pos,120);setTimeout(pos,500)}document.querySelectorAll('.tl').forEach(mk)})();",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}