shadcn.io is not affiliated with official shadcn/ui
Barista Recipe Brew Timer Profile Block for Radix UI
A barista profile as a recipe with a brew timer: a method group of espresso, V60, AeroPress and cold brew, the recipe with a ratio worked out from dose and water, numbered steps, and a countdown with Start, Pause, Resume and Reset that says Done at zero.
Installation
Overview
Keep a brew method and its clock in one place, with this barista profile for React with Radix UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the barista: initials, name, role and place. A Segment Group chooses the method: espresso, V60, AeroPress or cold brew. The recipe shows the dose, the water, the temperature and the ratio, worked out from the first two as 1 to a number such as "1:2" or "1:16.7", and under it four numbered steps. A band shows the countdown in large figures, driven by the catalog Timer kept out of sight. The foot, ruled by Guides, holds a polite status line, a Shine Button that starts, pauses and resumes, and an outline Reset. At zero the status says Done, once. It's built from Segment Group, Timer, Shine Button, Button, Badge, Avatar and Guides, with a CSS entrance only. For a recipe app, a coffee shop's staff page or any profile with a method and a clock.
FAQ
How do I add my own methods?
Add an entry to METHODS: an id, a name, the dose in grams, the water and its unit, the temperature, the brew time in seconds and the steps. Keep four steps so every method has the same height; the steps of the methods you are not viewing sit unseen in the same space to hold it. The ratio is worked out as water over dose, to one decimal, so it can never disagree with the figures above it.
How does the timer behave?
Start counts down from the method's brew time, Pause holds where it is, Resume carries on from there, and Reset goes back to the full time and stops. Changing the method resets the clock to that method's time. At zero it stops, the button offers Start again and the status line says Done, once. The clock is a real countdown of the catalog Timer; nothing plays a sound and nothing is saved.
Is the cold brew really eight minutes?
It is a rapid, shaken cold brew, which steeps for minutes rather than the usual overnight, so the demo has a time you can run to zero. For a long steep, set seconds to the real number; the clock shows minutes and seconds, so very long times need a change to its formatter.
Is it accessible?
The method group is named Method and moves with the arrow keys. The countdown is a timer with the name Time left that is not announced as it ticks; pause, resume, finishing and reset are said once each in a polite status line present from the start. The primary button keeps its focus when its label changes. The figures stay left to right in a right-to-left layout.