Koala UI

Product List

The grids a store is browsed through: a simple four-up grid, a new-arrivals row with ratings and a quick add, and a full category page whose filters, sort and count are live. Every tile is the same card.

Variant 1

Variant 2

Pro

Variant 3

Pro

Built from#

The lede is the SectionHeader; ratings are the read-only Rating; the add button is Button with swapKey, so its label rolls to "Added to cart" and back. The category page composes an Accordion of Checkbox rows and a range Slider, a sort Select, a Drawer for the filters on small screens, and an EmptyState when nothing matches. The only markup the family owns is the product card itself.

Responsive#

Each preview renders inside an iframe, so the grid answers to the frame width. Products sit two to a row on a phone (a store never shows one per row) and four from lg. On the category page the filter sidebar appears at lg; below it a Filters button opens the same panel in a Drawer, with the live count on its confirm button.

FAQ#

Map your products onto the card's shape: name, colourway, price, an optional compare-at price (it renders struck through with the sale price beside it), rating, review count, an optional New or Sale badge, the image and a link. Everything else in the card derives from those fields.