shadcn.io is not affiliated with official shadcn/ui
Recipe Swap Chat Block for React
A recipe-swap community in a list and a thread: eight recipes with difficulty dots and four filter pills, a conversation with each cook, and an Offer a swap button whose status goes from Pending to Accepted.
Installation
Overview
Trade a recipe with another home cook, with this recipe swap chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window for Pantrytrade, a recipe-swap community: the start pane "Recipes on offer" lists eight recipes with the cook, the time and the difficulty as three dots and a word, and four filter pills (Vegetarian, Vegan, Gluten-free, Under 30 min) that must all match, with a count like "5 of 8". Choosing a recipe opens its conversation with the cook; "Offer a swap" in the thread's top bar posts "I'd swap my lemon tart for your ..." with a Badge that reads Pending and, after a short wait, Accepted with a check. Filtering to nothing shows an Empty state, and the composer's Shine Button sends text to a typed reply. It's the starting point for a barter board, a classifieds inbox or any list that opens a conversation.
FAQ
What stays in the page, and how do I make it real?
Everything. The eight recipes, cooks and replies are typed in the file; the first thread opens with a swap already Pending that its cook accepts a few seconds after load, and a new offer is accepted after a short typed wait. Nothing is sent and no model runs. To wire it for real, create the offer on your server where offer runs and update the chip when the cook answers.
How do the filters work?
They are checkboxes styled as pills. A recipe shows only when it matches every pill that is on; "Under 30 min" is worked out from the time, the others from the typed tags. The count says "5 of 8", and filtering to nothing shows an empty state with a Clear filters button without the window changing height.
How is the swap status shown?
As a word and a glyph on the offer message (a clock and Pending, a check and Accepted) and in the list row ("Swap pending"), never as a color. The status line announces the change. Offering again in the same thread says it was already offered.
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 "Tamar Ashdown, 10:02" 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.