{"name":"marquee","title":"Marquee","description":"A continuously scrolling strip of content — logos, testimonials, announcements — that pauses on hover.","installCommand":"bunx marko-ui add marquee -y","usageTags":"","importSnippet":"import Marquee from \"@/components/ui/marquee/marquee.marko\";","usageSnippet":"static const logos = [\"Vercel\", \"Netlify\", \"Cloudflare\"];\n\n\n ${logo}\n","tags":["Marquee"],"parts":[{"name":"item","repeatable":true}],"props":[{"name":"autoFill","type":"boolean | undefined","required":false,"default":"false","description":"Whether to automatically duplicate content to fill the container."},{"name":"defaultPaused","type":"boolean | undefined","required":false,"default":"false","description":"Whether the marquee is paused by default."},{"name":"delay","type":"number | undefined","required":false,"default":"0","description":"The delay before the animation starts (in seconds)."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the marquee. Useful for composition."},{"name":"items","type":"T[]","required":false},{"name":"loopCount","type":"number | undefined","required":false,"default":"0","description":"The number of times to loop the animation (0 = infinite)."},{"name":"onComplete","type":"(() => void) | undefined","required":false,"description":"Function called when the marquee completes all loops and stops.\nOnly fires for finite loops (loopCount > 0)."},{"name":"onLoopComplete","type":"(() => void) | undefined","required":false,"description":"Function called when the marquee completes one loop iteration."},{"name":"paused","type":"boolean | undefined","required":false,"description":"Whether the marquee is paused."},{"name":"pauseOnInteraction","type":"boolean | undefined","required":false,"default":"false","description":"Whether to pause the marquee on user interaction (hover, focus)."},{"name":"reverse","type":"boolean | undefined","required":false,"default":"false","description":"Whether to reverse the animation direction."},{"name":"side","type":"Side | undefined","required":false,"default":"start","description":"The side/direction the marquee scrolls towards."},{"name":"spacing","type":"string | undefined","required":false,"default":"1rem","description":"The spacing between marquee items."},{"name":"speed","type":"number | undefined","required":false,"default":"50","description":"The speed of the marquee animation in pixels per second."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."}],"events":[{"name":"onPauseChange","arg":"PauseStatusDetails","description":"Function called when the pause status changes."},{"name":"pausedChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"marquee-demo","title":"Basic","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Soylent\", \"Stark\", \"Wayne\", \"Wonka\"];\n\n\n ${logo}\n","description":"A row of items scrolling continuously, pausing when hovered or focused."},{"id":"marquee-reverse","title":"Reverse","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Soylent\", \"Stark\", \"Wayne\", \"Wonka\"];\n\n\n ${logo}\n","description":"Pass `reverse` to scroll the opposite direction."},{"id":"marquee-speed","title":"Speed","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Soylent\", \"Stark\", \"Wayne\", \"Wonka\"];\n\n\n ${logo}\n","description":"`speed` sets the animation rate in pixels per second (default `50`)."},{"id":"marquee-vertical","title":"Vertical","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Soylent\", \"Stark\", \"Wayne\", \"Wonka\"];\n\n\n ${logo}\n","description":"Set `side` to `\"top\"` or `\"bottom\"` to scroll along the vertical axis."},{"id":"marquee-auto-fill","title":"Auto fill","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\"];\n\n\n ${logo}\n","description":"`autoFill` duplicates a short item list until it fills the container."},{"id":"marquee-controlled","title":"Controlled","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\nstatic const LOGOS = [\"Acme\", \"Globex\", \"Initech\", \"Umbrella\", \"Soylent\", \"Stark\", \"Wayne\", \"Wonka\"];\n\n\n\n

\n Paused: ${paused ? \"yes\" : \"no\"}\n

\n\n Toggle pause\n\n\n ${logo}\n","description":"Zag machines are controlled: a `paused` prop without a change handler never moves. Pair it with `pausedChange`, or use Marko's bind shorthand `paused:=state`.","essential":true},{"id":"marquee-compound","title":"Compound (attr tags)","source":"import Marquee from \"@marko-ui/shadcn/ui/marquee/marquee.marko\";\n\n\n <@item>\n Acme\n \n <@item>\n Globex\n \n <@item>\n Initech\n \n <@item>\n Umbrella\n \n","description":"Use `<@item>` attribute tags instead of `items=` to compose each entry's markup directly.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"T | undefined, number","description":"Render prop for `items=` entries.\n\nThe item is `T | undefined`, not `T`: a bodyless `<@item/>` produces an\nentry with no datum, and the render path below still reaches this body for\nit (the `` branch). Declaring it as `T` promised a\nvalue this component does not always pass."},"nativeAttributes":"div"}