Skip to content

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

Pro

Pick Five Prize Draw Product Card Block for Svelte

A community prize-draw entry where you pick five numbers from 1 to 30 on a grid, quick pick from a typed list, fill a drawn ticket and lock it in, with the prize pool and the odds stated plainly.

UI library: Ark UI

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 people fill in a ticket with this prize draw product card for Svelte with Ark UI. A grid of 30 numbered cells, six across, comes first; each is a native checkbox, and a sixth pick is refused in words. At the end a drawn ticket with notched edges fills as you pick, its five rings in ascending order, with the draw date, the prize pool and the odds written out, "Matching all five: 1 in 142,506", worked out from five of thirty. Button "Quick pick" cycles through a typed list of five sets, so nothing is random, and "Clear" empties the ticket. The one Shine Button, "Lock in these numbers", fixes the ticket for this demo. Nothing is bought here. For raffles, community draws and number pickers.

FAQ

Where do the odds come from?

From the count of ways to choose five numbers from thirty, worked out by waysOf, so changing NEEDED or the size of NUMBERS changes the odds line. The prize pool (POOL) is typed.

Is Quick pick random?

No. It steps through the typed sets in QUICK, so the page is the same on every load. In a real draw pick on the server and never in the browser.

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

The picks and the lock are page state; nothing is bought, entered or stored. This block is an interface only, and it says so on the ticket. If you build a real draw, check the rules for your region, verify age on the server and add the limits and help links your law requires.

How do I use it with a keyboard?

Tab to the first number, use Space to pick or remove it and Tab on to the next. A full ticket refuses a sixth pick and says why.

How does it look on a phone?

The grid keeps its six columns and the ticket sits under it, with the buttons wrapping.

Is it accessible?

Every number is a labelled checkbox, the ticket's numbers are a named list, and each pick, refusal and lock is announced by the polite status line.

All 100 product cards blocks