{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sliding-content-tabs",
  "title": "Sliding Content Tabs",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A compact tab switcher with a sliding active surface and content transition.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/sliding-content-tabs.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Star, ThumbsUp, Users } from \"lucide-react\";\n\nconst tabs = [\n  { label: \"Audience\", content: \"1,284 people are in your audience.\", Icon: Users },\n  { label: \"Reactions\", content: \"68 people reacted to your latest post.\", Icon: ThumbsUp },\n  { label: \"Saved\", content: \"12 items are saved for later.\", Icon: Star },\n];\n\nexport function SlidingContentTabs() {\n  const [active, setActive] = useState(0);\n  const activeTab = tabs[active];\n\n  return (\n    <section className=\"w-full max-w-[288px] rounded-[10px] border border-[light-dark(#dfe3ea,#30343a)] bg-[light-dark(#ffffff,#101216)] p-[5px]\">\n      <div className=\"relative grid grid-cols-3\" role=\"tablist\" aria-label=\"Activity\">\n        {tabs.map(({ label, Icon }, index) => (\n          <button\n            key={label}\n            id={`sliding-tab-${index}`}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={active === index}\n            className={`relative z-10 inline-flex min-w-0 items-center justify-center gap-1.5 rounded-md border-0 bg-transparent px-1.5 py-[9px] text-[11px] transition-colors duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[#f97316] ${active === index ? \"text-white\" : \"text-[light-dark(#69727f,#858c96)]\"}`}\n            onClick={() => setActive(index)}\n          >\n            <Icon size={15} strokeWidth={1.8} aria-hidden=\"true\" />\n            <span>{label}</span>\n          </button>\n        ))}\n        <span\n          className=\"pointer-events-none absolute inset-y-0 left-0 w-1/3 rounded-md bg-[#f97316] shadow-[0_1px_2px_light-dark(#0000001f,#0005)] transition-transform duration-[750ms] ease-[cubic-bezier(.22,1,.36,1)]\"\n          style={{ transform: `translateX(${active * 100}%)` }}\n          aria-hidden=\"true\"\n        />\n      </div>\n      <p key={active} className=\"m-0 px-2 pb-[7px] pt-[14px] text-[11px] leading-[1.4] text-[light-dark(#545d6a,#a9afb8)]\">\n        {activeTab.content}\n      </p>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/sliding-content-tabs.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/sliding-content-tabs",
  "categories": [
    "navigation",
    "click"
  ],
  "type": "registry:component"
}