# Product gallery

Product gallery: a free component, built on your design tokens, to use at the top of a product page, for choosing colour and size. The top of a product page: a swipeable photo gallery with dots on a phone and thumbnails from tablet up, name, sale price, rating, colour swatches, size chips with one sold out, Add to bag and save.

Prompt: Add the OpenDesigner component product-gallery to this project: https://opendesigner.dev/library/r/product-gallery.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: selected, sold out, sale, added, saved, hover, focus.

Accessibility: The gallery is a focusable group that arrow keys move through, with named dots and thumbnails; colour and size are native radio groups (the sold-out size is disabled and named so), and the prices and rating are read as words.

File: https://opendesigner.dev/library/r/product-gallery.html