shadcn.io is not affiliated with official shadcn/ui
Shop the Look Lookbook Gallery Block for Vue
A drawn styled room with four numbered pins that open popovers with the item, its price and a link, beside the same four items as a real list, with two looks to choose from.
Installation
Overview
A shop-the-look lookbook for Vue with Ark UI, for Hearth & Hue, a furniture shop. On a wide screen it is a split: the styled room is framed at the start, with + marks on its corners and four numbered pins on it, and at the end of a solid divider sit the header, a "Look" chooser (Reading corner or Morning light) and the same four items as a real list with prices and links. A pin is a real button that opens a popover with the item, its price and a "View" link, from the keyboard or by touch; the list does the same job without any pin, so the pins are decoration on top of it. The pins sit where the drawn sofa, lamp, print and rug are, worked out from the same numbers that draw the room. On a phone the list sits under the room and the pins stay. The room is drawn, not photographed, in your theme's own greys. It's built from Popover, Toggle Group, Button and Guides, with CSS transitions and your theme's tokens for every colour. The shop, its products and its prices are made up for the example.
FAQ
How do I use my own photograph?
Each look in LOOKS has a scene, a caption and four items; every item has a name, a price, a detail, a side for its popover and a position in percent (x, y). Replace <Scene ratio={RATIO} scene={current.scene} /> with <img alt="" className="size-full object-cover" src={…} />, set RATIO to the photograph's width over its height, and type each pin's x and y by hand instead of reading them from anchorsOf, which only knows the drawn room.
Where do the pins come from?
anchorsOf(scene) reads the numbers that draw the room (where the window light falls, which side the sofa is on, how wide it is) and returns a point on the sofa, one on the lamp shade, one on the print and one on the rug, in percent of the picture. A pin is placed at its point with CSS variables, so it stays on its object at every size.
How does it work with a keyboard?
Tab reaches the look chooser (arrow keys move through it), then each pin; Enter or Space opens its popover, Escape closes it and a press anywhere else closes it too. The popover has a "View" link. The list of items under or beside the picture has a real link in every row, so nothing needs a pin. Hovering or focusing a row's link rings the matching pin.
How does it fit on a phone?
The picture comes first, then the chooser's look and the list under it; the pins stay on the picture and open the same popovers, which move to stay on screen. The two looks' lists share one cell, so choosing the other look never changes the height.