shadcn.io is not affiliated with official shadcn/ui
Product Showcase Gallery Block for Solid
A product viewer for a running shoe: a vertical rail of four angles beside a 4:3 stage, three finishes that recolour every picture, and price, sizes and stock with an Add to bag button.
Installation
Overview
A product showcase for Solid with Ark UI. A vertical rail of four thumbnails (side, top, sole and detail) sits beside a 4:3 stage that shows the chosen angle; they are vertical tabs, so the arrow keys move through the angles and the stage is the panel. At the end of the split, the product: its name and a sentence, a group of three finishes (Graphite, Stone, Bone) that steps the shoe's upper through the theme's greys in every picture, price, sizes and stock in a definition list (the stock line follows the finish), and the Shine Button, "Add to bag". On a phone the thumbnails become a row under the stage. The shoe is drawn in the theme's greys, never photographed. The page's rails and top rules come from the Guides spine. It's built from Guides, Tabs, Toggle Group and Shine Button, with CSS transitions for the entrance. For shops, product pages and any item worth seeing from more than one side.
FAQ
How do I add another angle?
Add an entry to VIEWS (an id, a label, a description and a scene kind) and write the picture: each kind is a small function in the scene kit, and with photographs you replace Scene with an <img> per view. The rail takes any number of thumbnails; on a phone it scrolls sideways when they don't fit.
How do the finishes work?
The finish's index is the drawing's seed, and the shoe's upper picks one of the kit's inks from it: dark for Graphite, middle for Stone, light for Bone. Every thumbnail and the stage redraw at once. With photographs you would keep one image per finish and angle, and swap them in sceneOf's place. The group always keeps one finish chosen, and the stock line and the label above it follow.
Which keys work?
Tab goes to the rail, and the up and down arrow keys move through the angles (the rail is a vertical tab list, so left and right do nothing, even on a phone where the thumbnails sit in a row). Arrowing selects the angle at once. The finishes are a toggle group of their own, with one finish always on, and a polite line announces the angle and finish.
What does Add to bag do?
It is a Shine Button that marks this finish as added (the label changes to "Added to your bag" and a polite line says so) and does nothing else: connect it to your cart in addToBag. Choosing another finish brings the original label back, because it's a different product.