shadcn.io is not affiliated with official shadcn/ui
Wine Pairing Chat Block for Solid
A sommelier's thread with no free text: four labelled sliders, dish chips that set them and a Find a bottle button that returns the nearest of eight typed wines with its profile beside yours.
Installation
Overview
Find the bottle that suits a dish, with this wine pairing chat for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a window for Decantly, a wine merchant: Sorcha Linnell is the sommelier and the composer is four labelled Sliders (body, acidity, sweetness and tannin, each 1 to 5 with its two end words and its value), four dish chips (salmon, mushroom risotto, aged cheddar, dark chocolate) that set the sliders to a typed pairing, and "Find a bottle", the Shine Button and the only colored control. Pressing it posts your four numbers, and after a typing line she answers with the nearest of eight typed wines by the sum of the four gaps: a card with a Badge such as "Closest of 8, distance 2", the wine's profile as dots beside yours and a runner-up. It's the starting point for a recommender that matches a profile, from wine to coffee to paint.
FAQ
What stays in the page, and how do I make it real?
The list of eight wines is typed in the file and the sum is real; nothing is sent and no model runs. To wire it for real, send the four numbers to your catalogue where ask runs, rank your stock with the same distance and append the answer to the same list.
How is the nearest wine chosen?
Each wine has four numbers from 1 to 5. The distance is the sum of the four absolute gaps to your sliders, and the wines are sorted by it; equal distances keep the order of the list, so the earlier wine wins a tie. The runner-up is the second in that order. The card shows both profiles as dots, with the numbers in text for screen readers.
What do the dish chips do?
Each sets the four sliders to a typed pairing for that dish and shows as pressed while the sliders still match it; moving a slider releases the chip. They are native radio buttons, so arrow keys move between them.
Why is there no text field?
The pairing is a profile, not a sentence, and there is no model to read free text, so the controls are the four traits. Add a text field when you have something to read it.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Sorcha Linnell, 19:10" or "You, ...". Delivery is a glyph and a word, never a color. Every control is a real button, field or checkbox with a name, Enter sends and Shift and Enter add a line, and the avatars are hidden from assistive technology because names are always in text.