shadcn.io is not affiliated with official shadcn/ui
Product Showcase Storefront Block for Svelte
A homepage shelf with quick add: New, Best sellers and Sale tabs over eight drawn pieces, each with its price, a read-only rating and a row of sizes that adds that size, sold-out sizes named, and a bag count.
Installation
Overview
Show a shop's shelves on its homepage and let people add from them, with this product showcase for Svelte with Ark UI. A header says what Everly Row, a womenswear label, offers. In a hairline frame with a plus mark on each corner, the first band holds three Tabs (New, Best sellers, Sale) and the bag count. Under it, eight drawn pieces sit in hairline cells; each has its name, a word badge (New, its rank, or the saving), the price (a sale shows the old price struck and the new one), a read-only Rating and a row of sizes. On a desktop the sizes are drawn when you hover or focus the cell, and they are always shown on a touch screen and on a phone. A sold-out size is struck through and disabled, named as sold out for a screen reader. Pressing a size adds that size: the cell says Added, size M in a line it kept free, the bag count goes up and the status line says what was added. The tabs swap the cells in place, so the shelf keeps its height. It's built from Tabs, Rating, Badge, Button and Guides, with a CSS entrance only. For a homepage, a landing page shelf or a lookbook.
FAQ
How do I fill it with my own products?
Edit PIECES (an id, a name, the price in cents, an optional was price, the sizes that are out, a rating and its review count, a drawing kind and a grey step) and SHELVES, which lists the eight piece ids for each tab. A piece on sale shows its old price on every shelf it appears on.
What happens when I press a size?
In the page: the bag count goes up by one, the cell shows the size you added and the status line says "Added Wrap Dress, size M, to the bag in this demo". Nothing is bought or stored. Connect the handler to your cart and keep the line, so the person is told what happened.
Why are the sizes hidden until hover?
To keep the shelf quiet. The row is clipped, not removed, so its space is kept and nothing moves when it appears, and it shows on hover, on focus anywhere in the cell, and always on a touch screen or a phone. Tabbing into a cell therefore reveals its sizes before you reach them.
Are the stars a control?
No. The Rating is read-only and drawn in the text colour, with the score and review count written next to it, so a screen reader reads the numbers and skips the stars.