React Article Carousel

The featured-articles slider from a silicon vendor's homepage: a fixed left header — title, description, and an expandable Quick Links — beside a sliding row of cards, each with an image, category tags, a title, and a description. The square arrows advance it, a progress bar tracks how far you've scrolled, and it also swipes on touch and drags with the mouse. Native scroll-snap under the hood.

Installation

npx shadcn@latest add article-carousel.json

Props

PropTypeDescription
titlestringSection heading (arrows sit opposite it)
descriptionstringLeft-column intro paragraph
quickLinks{ label, href }[]Expandable "Quick Links" list (optional)
articlesArticle[]{ image?, category?, tag?, title, description?, href? }

Each article's image is any node — pass an <img className="aspect-[16/9] w-full object-cover">. The category and tag render as Category | Tag above the title.