shadcn.io is not affiliated with official shadcn/ui
Vending Machine Slot Features Block for React
A module picker of twelve coded slots in a hairline grid, with a tray under it that shows the chosen module, its price and a Shine Button that installs it.
Installation
Overview
A module-picker feature section for React with Base UI. A centred header says "Pick a module, install it in one press". Under it, twelve slots share hairlines in one rounded frame, coded A1 to C4: each has its code, a glyph, its name and whether it is Included, an Add-on or already Installed. The slots are one radio group, so the arrow keys move the choice. Under the grid, a tray shows the chosen module with its sentence and its price, beside the one Shine Button, Install, which marks the module installed on its slot. Four slots across from lg, three from sm, two on a phone. It's built from Badge and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For app builders, plan pages and any product sold as parts.
FAQ
How do I change the modules?
Edit BAYS at the top of the file: each entry has a code, a name, an icon from Lucide, a sentence and, for an add-on, a monthly price. Leave price out and it is included. START_INSTALLED lists the modules that are installed when the page loads. Keep twelve, so the grid fills its rows at four, three and two across.
What does Install do?
It marks the chosen module installed: its slot swaps its tag for a check and "Installed", the button's label becomes "Installed", and a polite status line announces it. The button stays focusable and ignores another press. Connect install to your own checkout or API call.
How do I move around the grid with a keyboard?
Tab goes to the group once, and the arrow keys move the choice between slots, in reading order, as for any radio group. The chosen slot is outlined, and the focused slot has a focus ring.
Related
- 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.
- Pro
Badge Counter Wall Features
Metrics and chartsA wall of eight channel counters for a unified inbox, with a two-button toggle that switches between every channel and only those with unread messages.
- Pro
Integration Logo Mark Grid Features
App screensA tabbed integration directory for an integration hub: twelve tiles with abstract monograms, each with a connect switch, three category tabs and a live count of what is connected.
- Pro
Compliance Badge Grid Features
Metrics and chartsSix control cards for a privacy-operations tool, each with a coverage ring counted from the data, a sentence of counts and a Passing or open-items badge.
- Pro
Radial Dial Wheel Selector Features
Diagrams and mapsA six-wedge dial for a model router: choose a skill and the needle turns to its wedge, the hub rolls to its score, and a list beside the dial shows all six with the model each goes to.
- Pro
Periodic Table Element Features
Documents and objectsA periodic table of eight platform primitives with a category legend that tints the others and a line under the table for the element you choose.