shadcn.io is not affiliated with official shadcn/ui
Testimonial Carousel Skeleton Block for Solid
A customer quote carousel that loads in place: working arrows and dots over three slides of bars that become stars, a quote, an initials avatar, a name and a role.
Installation
Overview
Show a quote carousel while the quotes load, then swap them in without moving anything, with this testimonial carousel skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a band heading ("Customers" and a "1 of 3" count) and a Carousel of three slides for Nainsook, a linen-bedding shop, with Previous, Next and a dot for each slide. The frame, the heading, the count and the controls are real from the first paint and work while the quotes are bars; each slide's Rating, three-line quote, initials Avatar, name and role are Skeleton bars that become the content in the same boxes when you press Load. Reload goes back to the bars. There is no autoplay; the track swipes on touch and the arrow keys move it. It's built from Carousel, Rating, Avatar, Button, Skeleton and Guides, with a CSS entrance only. For reviews and customer stories fetched from a service.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The three customers are typed in QUOTES, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the content swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real content when it arrives. The bars sit in the same cells as the content, so keep one component for both.
Why doesn't the carousel change height when the quotes arrive?
Each bar and its content sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The three slides share one track and the tallest sets the height, so moving between them changes nothing either. The frame and the labels are real in both phases, and the polite line reserves two lines, so the panel is as tall before, during and after loading. A heading or a paragraph that wraps to more lines than its bars is the one thing that can still move the page, so give a text bar as many lines as the text takes at that width.
Do the arrows and dots work while it loads?
Yes. They belong to the carousel, not to the data: pressing them moves the track and the "1 of 3" count whether the slides are bars or quotes, and the polite line names the slide once the quotes have loaded. The arrows are marked disabled at the ends and stay focusable, so a press does not drop focus.
Why is there no autoplay?
Moving content should be the visitor's choice, and a skeleton should be still. Add a timer and a Pause button if you need one; keep the arrows and dots as they are.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the quotes…", and the polite line says what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the content is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. Each slide is named "Customer 2 of 3" and the slides that are not showing are inert and hidden from assistive technology.