shadcn.io is not affiliated with official shadcn/ui
Ecommerce Product Skeleton Block for Solid
A product page buy box that loads in place: bars become a drawn camp chair with four thumbnails, price, stars, a description and size toggles, then thumbnails and sizes work.
Installation
Overview
Show a product page while its picture and details load, with this ecommerce product skeleton for Solid with Ark UI. A hairline frame with a plus mark on each corner holds three ruled bands for Saltire, a camping-gear shop: a gallery, the details and a foot. The "Size" label, Add to bag and the save button are real from the first paint; the main drawn picture and its four thumbnails, the title, price, stars, review count, a three-line description and the size toggles are Skeleton bars that become the data in the same cell when you press Load, the description coming in a word at a time. Once loaded, a thumbnail changes the main picture and a size is picked with Toggle Group. Add to bag is the one Shine Button and adds nothing: it says so. On a phone the thumbnails sit under the picture in a row. It's built from Skeleton, Skeleton Text, Toggle Group, Rating, Shine Button and Guides, with a CSS entrance only. For product pages and any buy box that waits for a query.
FAQ
What stays local, and how do I wire it to a real product?
Nothing is fetched. The product, its four views and three sizes are typed in PRODUCT, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data 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 data when it arrives. The bars are derived from the same data as the content, so keep one component for both. Add to bag and the save button only say that nothing was added or saved: connect them to your cart and wishlist.
How do the thumbnails work?
Each is a button that shows its view in the main picture and is marked pressed while it is the one showing. They are invisible until the data is in, so they can't be focused as bars. Under reduced motion the main picture changes at once.
How do the sizes work?
They are a single-choice toggle group that always has one size chosen (Regular at first), so Add to bag always has a size to name. The group is a bar until the product loads, since sizes are data and differ per product.
Does the page keep its height while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The description's bars and its text share a cell too, so a long description reserves its lines before it arrives. The frame, the labels and the buttons are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
Are the pictures photographs?
They are drawn: each product is a few filled shapes in an SVG on a muted ground, tinted from the foreground token so they follow light and dark mode. There are no photos. To use real pictures, replace the Art component with an <img> of the same box (keep its size classes) and keep the bar the same size.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the product…", and the polite line announces 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 data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. The description is announced once, as text, when it arrives; the stars are decoration with the rating in words beside them.