shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Run a limited release without a cart with this sneaker product card for Svelte with Ark UI. Two tiles, a low and a mid, are each marked at their corners inside a framed panel. A Segment Group at the end of the header, "Sizes in", relabels every size chip as US, EU or UK from one typed table. Each tile has a drawn greyscale shoe that re-tones with the colourway, a size chip row and an outline Button that says "Enter the draw". Entering is one entry per size: the chip gets a check, the line reads "Entered for US 9: results 16 Oct (this demo)", the entry count goes up by one and the odds are worked out again, as in "1,205 entries for 300 pairs, about 1 in 4". Withdraw takes the entry back. Nothing is drawn, stored or bought.
FAQ
How do I change the shoes, sizes and odds?
Edit SHOES, COLOURWAYS and SIZE_ROWS. A shoe has a price in cents, the entries already in and the number of pairs; the odds are Math.round(entries / pairs) over those and your own entries. The date of the result is the constant RESULTS.
How does the size switch work?
Each row of SIZE_ROWS holds the same size in US, EU and UK, and the switch only chooses which column the chips show. Your pick is stored as the US size, so changing the system keeps your choice and your entries.
Are the odds real?
No. The entry counts are typed in this demo and the line says so. Nothing is drawn: a real release picks winners on the server and tells them by email.
What stays local, and how do I wire it for real?
The size system, the picks and your entries are page state. Replace enter and withdraw with calls that record one entry per person per size on the server, and read the entry counts from there.
