shadcn.io is not affiliated with official shadcn/ui
Welcome Slides Carousel Onboarding Block for React Aria
A whole-screen intro for a bookkeeping app: four slides in a carousel, each a greyscale drawing over its title and sentence, named dots, Previous and Next, Skip, and a last slide where Next becomes Get started.
Installation
Overview
Show new people what the product does before they set anything up, with these welcome slides for React with React Aria. It's the intro of Counthurst, a bookkeeping app for small shops: the page's side rails run its full height and one band crosses the screen between two rules with a plus mark at each end. Under the step header (the product's mark, “Slide 1 of 4” and a hairline of progress) a framed panel holds four slides in the Carousel, each a greyscale drawing (a receipt stack, bank feed lines, quarter bars, you and your accountant) over its title and a sentence. Dots under the slides name each one, and Previous, Next and Skip sit below; on the last slide Next becomes Get started, the only colored control, a Shine Button. Nothing advances by itself and nothing is saved: the results say so. Built from Carousel, Progress, Button, Shine Button and Guides. For product intros, feature tours and first-run slides.
FAQ
How do I change the slides?
Edit SLIDES: each has an id, a short label for its dot, a title and a sentence. The drawing for a slide is chosen by its id in Drawing; to add a slide, add its drawing there, or replace the drawings with your own product screenshots inside the GROUND box. Keep to four or five: an intro that needs more is a tour, and the onboarding tour points at real parts of the app.
How do I move through it, with a mouse, a finger or a keyboard?
Next and Previous, the dots, and a swipe on a touch screen all change the slide, and the step header's count and progress follow. Previous waits, marked unavailable, on the first slide. The arrow keys move the slide when focus is on Next, Previous or a dot, and follow the page's direction. The carousel swaps slides with a swipe or its API; the arrow keys work from the buttons and the dots.
Does it advance by itself?
No. Slides that move on their own are hard to read and, past five seconds, a failure of the pause rule. This one only moves when asked, and reduced motion removes its transitions.
What do Get started and Skip do, and how do I wire them?
Here each shows a result under the panel and sends nothing: saved in this demo for Get started, skipped in this demo for Skip. In your app Get started should record that the intro was seen and open your first real step; Skip should do the same and drop the person into the app, so the slides don't come back.
What does a screen reader hear?
The page has one hidden heading, “Welcome to Counthurst: four things to know”, and each slide's title is a level 2 heading. Off-screen slides are hidden from assistive technology, each dot is a button named “Slide 2 of 4: Bank feeds” with the current one marked, and a polite status message reads the slide when it changes. The drawings are hidden: each slide's sentence says what they show.