shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Teach a customer to brew what they bought with this tea product card for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds one tin, drawn in greyscale, with its price and an outline Button that says "Add to bag". Beside it, a Toggle Group asks what you are brewing in (Cup, Pot or Iced) and a description list gives the water temperature, the grams of leaf, the steep time and the caffeine on a five-dot scale. "Start steep" runs the catalog Timer from the typed time, with Pause, Resume and Reset; at zero the status line says "Your tea is ready". Choosing another vessel puts the timer back at the start. The digits stay quiet for screen readers and the status line speaks only when a steep starts, pauses, resets or ends. Nothing is stored or bought. Guides rule the bands. For tea shops and any product that comes with a method.
FAQ
How do I change the teas or the times?
Edit VESSELS. Each has the water temperature in degrees, the grams of leaf, the steep time in milliseconds (millis) and the same time in words. The tin's price is in cents in TIN.
Is the countdown real?
Yes. It is the catalog Timer counting down in the browser from the typed time, and it starts only when you press Start steep. It never runs on its own and never loops. Under reduced motion the digits still change, since they are the content, but nothing else animates.
Why do the digits stay silent for screen readers?
A ticking number read every second would drown everything else. The digits are hidden from assistive technology and the polite status line speaks when a steep starts, pauses, resumes, resets or finishes.
What stays local, and how do I wire it for real?
The vessel, the timer and the bag are page state. The bag is page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart. The picture is typed shapes: swap Picture for an img of the product.
