shadcn.io is not affiliated with official shadcn/ui
Card Carousel Features Block for Ark UI
A multi-up carousel of seven capability cards for a product-tour builder, each led by a greyscale drawing, with the next card cut off at the rail and previous and next buttons in the heading row.
Installation
Overview
A card carousel features section for React with Ark UI. Seven capability cards of a product-tour builder sit in one hairline band that runs from rail to rail under a compact heading. Each card is led by a small greyscale drawing of the capability (a step tooltip, hotspots, a launcher checklist, branching paths, targeting rules, a themed step, a completion funnel) over a tag, a title and one sentence. One card fits on a phone, two on a tablet and three on a desktop, always with the next card cut off at the rail as the cue to keep going. The previous and next buttons sit in the heading row, and the arrow keys turn the cards too. It's built from Carousel, Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, builders and any product with more flagship capabilities than a grid can hold.
FAQ
How do I change the cards?
Each card is one Cell in the file: give it a tag, a text and a drawing as its children, and add its name to NAMES. Raise COUNT when you add one. The drawings are small components made of plain boxes and lines, so swap in a screenshot or an image if you prefer; keep the drawing's box aria-hidden, because the card's words say the same thing.
How many cards show at once, and why is one cut off?
1.2 cards on a phone, 2.5 from md and 3.5 from lg, so there is always part of the next card in view. The cut-off card is out of the tab order and the reading order until you move on: only the whole cards are exposed. The last step stops at the end of the track rather than leaving it half empty.
How do the buttons and the keyboard work?
The previous and next buttons move one card at a time and wrap from the last card back to the first, so they never disable under your focus. The left and right arrow keys do the same while focus is inside the carousel, and they follow the page direction in a right-to-left layout. A polite status line says which cards are showing. The carousel is Ark's: the buttons set the controlled page and the track scrolls to it with scroll snapping.
Does it move by itself?
No. Nothing autoplays, so there is nothing to pause. The only motion is the track moving when you press a button or swipe, plus a one-time fade-up of the heading and the band when the page loads, which is off with reduced motion.