Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Numbered Edition Product Card Block for React Aria

A numbered desk clock in an edition of 100 with a ten by ten matrix of numbers, 64 sold and 36 open, where you hold a number, jump to the next open one or release it.

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

Let buyers choose their number with this limited edition product card for React with React Aria. A drawn desk clock sits at the start with its price and "36 of 100 left". Beside it is a ten by ten matrix of numbered cells: sold numbers are filled and struck through, and open ones can be held. The matrix is one group of native radio buttons, so it is a single Tab stop and the arrow keys move between the open numbers. Button "Hold the next one" jumps to the next open number, wrapping at the end, and "Release" lets it go. The count and a polite line say what changed, for example "No. 64 held for you in this demo". Nothing is reserved or bought. For numbered prints, watches and any run of one hundred.

FAQ

How do I change which numbers are sold?

The sold set is built at the top of the file from a fixed shuffle (rankOf), so the same 64 numbers are sold on every load. Replace SOLD with your own list of numbers, and SOLD_COUNT follows its length if you also update it.

How do I move around the matrix?

Tab into the matrix once, then use the arrow keys: they skip sold numbers because those are disabled. Space or a click holds a number, and holding another moves your hold.

What stays local, and how do I wire it for real?

The hold is page state; nothing is reserved, stored or bought. Call your inventory in hold to place a timed hold and read the sold list from it. The picture is typed shapes: swap Picture for an img.

Why radio buttons and not toggles?

A hold is one choice from many, which is what a radio group means, and it gives one Tab stop and arrow keys with no extra code. Sold numbers are disabled radios.

How does it look on a phone?

The clock stacks above the matrix, which keeps its ten columns with cells of about 24 pixels at the narrowest width.

Is it accessible?

Each cell is read as its number plus "open" or "sold"; a sold number is struck through as well as filled, and a held one is inverted. Changes are announced by the polite status line.

All 100 product cards blocks