shadcn.io is not affiliated with official shadcn/ui
Product Shelf Planogram Features Block for React
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 Base UI. 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.
Related
- Pro
A masonry wall of six cards of different heights for a team workspace: a checklist whose boxes really tick, a quick-add bar, a stat, a three-lane board, a set of tags and a thread with a mention.
- Pro
Heatmap Density Grid Features
Metrics and chartsA 24 by 12 traffic density grid in a framed figure with a legend, three numbered callout cells, and the callouts described beside it, for a traffic observability tool.
- Pro
Inset Border Card Grid Features
Live controlsSix ring-inset preference cells for a team-settings app, each holding one working control: a switch, a slider, a toggle group, a select, a checkbox and a segmented control.
- Pro
Annotated Mockup Pin Tooltips Features
App screensA shipping-ops console drawn in greyscale with six numbered pins that open a popover on click, tap or Enter, and a legend of six rows in shared hairlines that opens the same popovers.
- Pro
Bento Grid Features
BentosA bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.
- Pro
Keyboard Focus Grid Features
Live controlsA six-cell feature grid for a keyboard-first notes app: one focus ring glides between cells with the arrow keys, and Enter or a tap writes the cell's detail into a strip under the grid.