Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Carousel Slider Features Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A carousel slider features section for Solid with Ark 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 Ark's carousel with a controlled page: the bar and the buttons set the page and the track scrolls to it. Off-screen slides are hidden and inert by the block, because Ark leaves them reachable.

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.

What does a screen reader hear?

Only the current slide is exposed. A polite status line announces "Step 3 of 5" with the step's title after each change, and each slide is named by its step and its place.

How does it fit on a phone?

The drawing sits above the words so you see the step first, at a shorter height. The segment bar scrolls sideways under the stage and the count is hidden, since the segments already show where you are.

All 170 features blocks