Curved Cards Marquee

PRONew

Preview live, install via shadcn or copy the source.

Installation

Install via shadcn

This will install the component and its dependencies automatically.

PRO COMPONENT

Unlock with PRO

This component is exclusive to reframe/ui PRO.
Get instant access to all premium components and templates.

Usage

curved-cards-marquee-usage.tsxTSX

Props

NameTypeDefaultRequiredDescription
itemsCurvedCardItem[]YesCards with name, image, optional video.
contentType"images" | "videos" | "mixed"mixedNoWhat to render: "images" (image only, least intensive), "videos" (video when available), "mixed" (video if present else image).
radiusstring92emNoWheel radius controlling curvature.
radiusMobilestring72emNoRadius on mobile.
cardWidthstring24emNoCard width.
cardAspectstring1.48NoCard aspect ratio.
angleStepnumber18NoDegrees between cards.
countnumberNoRendered card count (repeats items).
durationnumber68NoSeconds per full rotation.
startRotationnumber-90NoWheel start rotation.
endRotationnumberNoWheel end rotation (default start-360).
pauseOnHoverbooleanfalseNoPause on hover.
heightstringclamp(700px, 60vw, 900px)NoStage height CSS.
wheelTopstring-3remNoTop offset of wheel.
cardRadiusstring5pxNoCard border radius.
cardPaddingstring6pxNoCard padding.
visualRadiusstring3pxNoVisual radius.
cardBackgroundstring#18181bNoCard background.
showGuidebooleantrueNoShow faint guide.
disableOnMobilebooleantrueNoDisable rotation on mobile (static).
mobileBreakpointnumber768NoMobile breakpoint px.
onCardClick(item, index) => voidNoClick handler.
renderCard(item, index) => React.ReactNodeNoCustom card renderer.
classNamestringNoRoot class.
cardClassNamestringNoCard class.
© reframe/ui 2026Built by @thommysart
More in Galleries & Carousels