Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Storefront blocks

Pro

Bulk Order Storefront Block for Vue

A size by colour order matrix for aprons: a number field per cell, units per row, a unit price that steps down at 24 and 48 units across the whole order, a bar of price breaks and a 12-unit minimum.

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

Take a wholesale order in one grid, with this matrix for Vue with Ark UI. A header says what Tansy & Twig, a maker of aprons and workwear, sells. The framed panel is a list of four colours (named greys) by six sizes, a Number Input in each cell and the units for each row at its end; on a phone each colour becomes a card with its sizes three to a line. Under it three tier cells show the price breaks, a bar marks 12, 24 and 48 units and a line says how many more units earn the next price. Four figures give units, price each, what you save and the total. The foot holds the block's one Shine Button. For a wholesale page, a team order or a workwear shop.

FAQ

How is the price worked out?

The unit price follows the whole order, not a cell: 12 to 23 units is $19.50 each, 24 to 47 is $17.70 and 48 and up is $15.90. Everything is in whole cents, and "You save" is measured against the 12-unit price. Edit TIERS for your own breaks.

What happens under the minimum?

The button stays quiet and unavailable, and pressing it says "The minimum order is 12 units; you have 7." The status line counts the units still needed. No tier is marked until the order reaches 12.

How do the number fields behave?

Each takes 0 to 99 and is named by its colour and size ("Bone, size M, units").

What stays in the page, and how do I connect it?

Everything. Add only notes the order in the status line; nothing is ordered, stocked or charged. To make it real, post the grid of units to your cart and check stock for each colour and size in the response.

How does it look on a phone?

Each colour is a card: its name and units on top, the six sizes in two rows of three, each with its size above. The tiers stack, and Add is pinned at the bottom of the screen.

Is it accessible?

Every field has a name that says its colour and size, the current price break is marked as current in the list, the bar is decorative because the line under it says the same in words, and the status line is a polite live region.

All 100 storefront blocks