shadcn.io is not affiliated with official shadcn/ui
Carousel Slider Features Block for React
A one-slide-at-a-time carousel of the five steps of making a deck, each a checklist beside a greyscale drawing, with a segmented progress bar of labelled segments as the navigation.
Installation
Overview
A carousel slider features section for React with Base UI. Five steps of making a deck in a presentation tool each get a slide of their own in a framed stage: a title, one sentence and a short checklist on one side, a greyscale drawing of the step on the other (an outline, a theme picker, speaker notes, a rehearsal timer, the export sheet). Under the stage, a progress bar of five labelled segments is the navigation: each segment is a button for its slide and fills up to the current one, with a "01 / 05" count and the previous and next buttons beside it. Nothing advances by itself. It's built from Carousel, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product tours, onboarding stories and any feature that is best told in order.
FAQ
How do I change the steps?
Each step is an object (label, title, text and points) and each slide is a Slide that takes the step and its drawing as children. Add a step to the list and a Slide to the carousel, and the segment bar and the count follow COUNT. The segments are min-w-20, so a sixth or seventh still fits on a phone with the bar scrolling.
How does the segmented bar work?
It is an ordered list of buttons named by their labels, with aria-current="step" on the current one. Pressing a segment goes straight to that slide, and every segment up to the current one is filled in the foreground colour. The previous and next buttons wrap around, and the left and right arrow keys do the same while focus is inside the carousel.
What differs between the targets?
The slides are Embla's: the bar and the buttons call scrollTo, and the selected slide is read back from Embla's select event. Off-screen slides are hidden and inert by the block.
Does it advance by itself?
No. There is no autoplay, so no pause control is needed. You move it with the segments, the buttons, the arrow keys or a swipe.
Related
- Pro
Card Carousel Features
Carousels and mediaA 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.
- Pro
3D Ring Carousel Features
Carousels and mediaSix capability cards on a true 3D ring in a framed stage, turned a card at a time by the previous and next buttons or the arrow keys, with the far cards dimming behind the front one.
- Pro
Slide Deck Carousel Pricing
Plan cardsEvery plan of a presentation tool on a slide of its own, in a carousel with a counter and previous and next buttons in the header row, and a filmstrip of one thumbnail per plan as its navigation.
- Pro
Animated Reveal Features
Tabs and accordionsA features section for a dashboard builder with a framed drawing of its editor at the start and four steps as vertical tabs at the end: each step adds a layer to the drawing and keeps the ones before it.
- Pro
Hover Accordion Mockup Split Features
Tabs and accordionsA features section for an operations console: an accordion of four features whose open row swaps the console screen drawn in a framed figure beside it, by pointer, focus or tap.
- Pro
Testimonials Multi-Up Carousel
Carousels and decksA quote carousel for an accounting platform that shows one, two or three cells per page by screen width, in a hairline-ruled band, paged with previous and next buttons and a Page 1 of 2 count in the heading row, or with the arrow keys.