shadcn.io is not affiliated with official shadcn/ui
Product Shelf Planogram Features Block for React Aria
A planogram editor drawn as three shelf rails of product boxes with price labels, one flagged gap and one selected facing, over three feature cells.
Installation
Overview
A planogram feature section for React with React Aria. A compact header says "Find the gap before the shopper does" and carries two buttons at its end: a Shine Button and an outline one. Below it, a framed editor shows one aisle of snacks: a toolbar with the aisle's name and its counts, then three shelf rails of product boxes in different widths and heights with a price label under each. One slot on the second shelf is empty, a dashed outline flagged "Gap, 2 facings", and one facing on the top shelf is selected, with an inspector chip over it. Under the editor, three cells with overshoot lines describe what the product does about gaps, facings and labels. It's built from Badge, Button, Shine Button and Guides, with your theme's tokens for every colour. For retail, merchandising and inventory products.
FAQ
How do I change the shelves?
Edit SHELVES at the top of the file. Each shelf lists its facings, and each facing has a name, a price, a grow for how much of the shelf it takes and a height. Boxes and labels read the same grow, so a label always sits under its box. Mark one facing selected and one gap.
Why are the widths not in pixels?
Each box takes a share of the shelf through a CSS variable, so the row fills its width at any size and the labels line up under the boxes without measuring anything. On a phone the shelves are narrower and the same shares apply.
Is the editor interactive?
No, it is a picture of the product and is inert and hidden from assistive technology. Its description is the figure's caption, and the three cells under it say the same things in text. Swap in your own screenshot or a live component if you have one.