Installation
npx shadcn@latest add @iconiq/infiniteribbonProps
InfiniteRibbon
Full-width looping ribbon that duplicates its children into a continuous marquee track and optionally rotates the whole strip.
childrenReact.ReactNodeRequired
Content repeated across the moving ribbon. Short announcement copy works best because it stays legible while scrolling.
repeatnumberDefault 5
Number of copies rendered per half of the seamless track. Higher values keep wider ribbons filled with repeated content.
durationnumberDefault 10
Loop duration in seconds. Lower values move the ribbon faster; values below 0.1 are clamped.
reversebooleanDefault false
Runs the marquee from left to right instead of the default right-to-left movement.
rotationnumberDefault 0
Degrees applied to the root strip with CSS transform, useful for diagonal banner layouts.
classNamestringOptional class names merged onto the root ribbon for positioning, colors, spacing, or typography.
The animated track is marked aria-hidden and a single screen-reader-only copy of children is rendered before it.
The component ships its own keyframes, so no global Tailwind animation extension is required.
Because rotation is applied as an inline transform, wrap the ribbon when you need additional transform utilities on the same element.
Registry bundle
Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.
Dependencies: none.