{
  "generatedFrom": "carousel.contract.json",
  "component": "Carousel",
  "slug": "carousel",
  "group": "Data Display",
  "tier": "composite-antd",
  "summary": "A swipeable set of slides — onboarding, a feature tour, a gallery — rendered through the shared Carousel.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/carousel-theme';",
    "element": null,
    "registers": null
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/carousel/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/carousel/carousel.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/carousel.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/carousel.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "package": "antd",
      "major": 6
    },
    "vue": {
      "package": "ant-design-vue",
      "major": 4
    },
    "html": {
      "via": "cdn-react",
      "runnable": "paste-and-run — React + antd loaded from a CDN, no build step"
    }
  },
  "props": [
    {
      "name": "autoplay",
      "type": "boolean",
      "default": "false",
      "desc": "Advance slides automatically"
    },
    {
      "name": "dots",
      "type": "boolean",
      "default": "true",
      "desc": "Show the position dots"
    },
    {
      "name": "dotPosition",
      "type": "top | bottom | left | right",
      "default": "bottom",
      "desc": "Where the dots sit relative to the track"
    },
    {
      "name": "effect",
      "type": "scrollx | fade",
      "default": "scrollx",
      "desc": "Slide transition style"
    },
    {
      "name": "arrows",
      "type": "boolean",
      "default": "false",
      "desc": "Show prev/next arrows"
    },
    {
      "name": "afterChange",
      "type": "(current) => void",
      "default": "—",
      "desc": "Fires after the active slide changes"
    }
  ],
  "tokens": [
    "colorPrimary",
    "borderRadius",
    "Carousel.dotWidth",
    "Carousel.dotHeight",
    "Carousel.dotActiveWidth",
    "Carousel.dotGap"
  ],
  "spec": [
    {
      "label": "Slide",
      "value": "radius 8 · brand-tint #F9F5FF panel"
    },
    {
      "label": "Active dot",
      "value": "brand #6A1EBB, wider (28px)"
    },
    {
      "label": "Rest dot",
      "value": "16×4, gap 8"
    },
    {
      "label": "Dot position",
      "value": "bottom (default) · top · left · right"
    },
    {
      "label": "Effect",
      "value": "slide (scrollx, default) · fade"
    },
    {
      "label": "Arrows",
      "value": "opt-in prev/next via the arrows prop"
    },
    {
      "label": "Motion",
      "value": "antd's built-in slide/fade transition (kept)"
    },
    {
      "label": "Autoplay",
      "value": "opt-in via the autoplay prop"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Carousel",
        "when": "a small, ordered set of equally-weighted panels the user can browse at their own pace"
      },
      {
        "what": "Tabs",
        "when": "named sections the user jumps between directly, not in sequence"
      },
      {
        "what": "Steps",
        "when": "a linear process with a clear start and finish"
      }
    ],
    "note": "Keep it to a handful of slides and always show the dots so people know there is more. Autoplay only for ambient galleries — never for content people need to read.",
    "dsv3": "COVERED — antd v6 Carousel themed once by carouselTheme; matrix: dotPosition (top/bottom/left/right) · effect (scrollx slide/fade) · autoplay (on/off) · arrows (on/off) · dots (on/off), all live in the playground. Verified via Figma search_design_system against the DS V3 Carousel set (Carousel-wrapper) — the DS themes antd's Carousel rather than re-implementing it, so the antd v6 API is the variant reference."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.\n     Carousel is a COMPOSITE (antd, no framework-free element), so its HTML form is a\n     CDN-React page — React + antd load from a CDN (esm.sh) and mount on open. It\n     consumes the SAME shared `carouselTheme` the React/Vue wrappers use, so it renders\n     the DS V3 look (radius-8 slides, brand active dot). Keeps antd's built-in motion.\n     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<style>\n  .aha-slide { box-sizing:border-box; height:160px; padding:24px; border-radius:var(--aha-radius-default);\n    background:var(--aha-purple-10); color:var(--aha-purple-60); font-family:var(--aha-font-product);\n    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; }\n  .ant-carousel { max-width:520px; }\n  .ant-carousel .slick-dots li.slick-active button { background:var(--aha-color-primary); }\n</style>\n<div id=\"root\"></div>\n<script type=\"module\">\n  import React from 'https://esm.sh/react@18';\n  import { createRoot } from 'https://esm.sh/react-dom@18/client';\n  import { ConfigProvider, Carousel } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';\n  import { carouselTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/carousel-theme.js';\n\n  const h = React.createElement;\n  const slides = ['Create in minutes', 'Present live', 'Share the results'];\n\n  // Same shared theme the React/Vue wrappers pass to ConfigProvider.\n  // Full matrix on one component: dotPosition (top/bottom/left/right) · effect (scrollx/fade) · autoplay · arrows.\n  createRoot(document.getElementById('root')).render(\n    h(ConfigProvider, { theme: carouselTheme },\n      h(Carousel, { dots: true, dotPosition: 'bottom', effect: 'scrollx', autoplay: false, arrows: false },\n        ...slides.map((s, i) => h('div', { key: i }, h('div', { className: 'aha-slide' }, s)))\n      )\n    )\n  );\n</script>\n",
    "react": "import { ConfigProvider, Carousel } from 'antd';   // antd v6\nimport { carouselTheme } from '@ahaslides-product/design/carousel-theme';\n\nconst slides = ['Create in minutes', 'Present live', 'Share the results'];\n\n<ConfigProvider theme={carouselTheme}>\n  <Carousel\n    dots                     // position dots (on by default)\n    dotPosition=\"bottom\"     // top | bottom | left | right\n    effect=\"scrollx\"         // scrollx (slide) | fade\n    autoplay={false}         // ambient galleries only\n    arrows={false}           // opt-in prev/next\n    afterChange={setCurrent}\n  >\n    {slides.map((s, i) => (\n      <div key={i}>\n        <div className=\"aha-slide\">{s}</div>\n      </div>\n    ))}\n  </Carousel>\n</ConfigProvider>\n// One shared carouselTheme → the DS V3 look; keeps antd's built-in slide/fade motion.\n",
    "vue": "<script setup>\nimport { ConfigProvider, Carousel } from 'ant-design-vue';   // ant-design-vue v4\nimport { carouselTheme } from '@ahaslides-product/design/carousel-theme';\n\nconst slides = ['Create in minutes', 'Present live', 'Share the results'];\n</script>\n\n<template>\n  <a-config-provider :theme=\"carouselTheme\">\n    <a-carousel\n      :dots=\"true\"\n      dot-position=\"bottom\"\n      effect=\"scrollx\"\n      :autoplay=\"false\"\n      :arrows=\"false\"\n      @after-change=\"onChange\"\n    >\n      <div v-for=\"(s, i) in slides\" :key=\"i\">\n        <div class=\"aha-slide\">{{ s }}</div>\n      </div>\n    </a-carousel>\n  </a-config-provider>\n</template>\n<!-- The SAME carouselTheme as React → one DS V3 look across both vendor libraries.\n     Same matrix: dot-position (top/bottom/left/right) · effect (scrollx/fade) · autoplay · arrows. -->\n",
    "theme": "// @ahaslides-product/design/carousel-theme — declared ONCE, consumed by both tiers.\nimport { carouselTheme } from '@ahaslides-product/design/carousel-theme';\n\nexport const carouselTheme = {\n  token: {\n    colorPrimary: '#6A1EBB',\n    borderRadius: 8,\n    fontFamily: 'var(--aha-font-product, \"Plus Jakarta Sans\", sans-serif)',\n  },\n  components: {\n    Carousel: {\n      dotWidth: 16,\n      dotHeight: 4,\n      dotActiveWidth: 28,    // brand-primary active dot, wider\n      dotGap: 8,\n      arrowSize: 20,\n      arrowOffset: 12,\n    },\n  },\n};\n"
  }
}