Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Vending Machine Slot Features Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A module-picker feature section for React with Radix 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.

Does the tray change height when I choose a module?

No. All twelve descriptions sit in one grid cell and only the chosen one is visible, so the tray keeps the height of the longest. The hidden ones are inert and hidden from assistive technology.

How is the price written for right-to-left languages?

The amount sits in its own left-to-right isolate, so "$8" keeps its sign, and the sentence around it follows the page's direction.

All 170 features blocks