shadcn.io is not affiliated with official shadcn/ui
Carbon Footprint Chat Block for React Aria
A sustainability coach's narrow chat that asks five questions as cards of single-choice answers, moves a yearly-tonnes meter in the top bar with each answer, and ends with a summary by category and two ideas.
Installation
Overview
Show a coach walking someone through a quick estimate, with this carbon footprint chat for React with React Aria. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Leafthorpe, a sustainability app: the top bar names the coach, Sabelline Orr, and carries a live meter, "About 4.2 t a year" over a Progress bar. The log asks five questions in turn, each a card of three or four single-choice answers: commute, food, home heating, flights and shopping. Picking one posts it as your message, moves the meter by a typed example figure, and brings her typed line and the next card after a Typing Indicator Text. The demo opens at question 3. After the fifth, a summary card lists tonnes by category and two ideas for the two biggest. Typed text is allowed but never scored. The composer's Shine Button, the only colored control, sends it. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a calculator in a chat, a quiz coach or any thread whose answers add up.
FAQ
What stays in the page, and how do I make it real?
Everything. The figures are typed example tenths of a tonne per answer in QUESTIONS, not measurements, and the card, the top bar and the status line all say they are examples. The coach's replies are typed lines per answer, plus a small script for free text. Nothing is sent and no model runs. To wire it for real, replace the figures with a calculation from your own emission factors, and save the answers where answer runs.
How does the meter work?
It is the sum of the figures of the answers so far, shown in words ("About 4.2 t a year") and as a bar out of 10 tonnes. Unanswered questions add nothing, so it only rises as you answer. It changes only when you pick a card answer; typed words never move it, and the status line says the new total each time.
Why can't I change an answer?
Each card is a fieldset of radio rows that becomes read-only once answered, so the thread stays a faithful record of what you told the coach and the meter always matches what is shown. To allow changes, drop the disabled check in QuestionCard and let answer replace the earlier value.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden name and time. Each question is a fieldset with a legend, the answers are real radios with arrow-key stepping, the meter has an accessible name and its words, and the composer's status line, the one live region, announces the new total. Nothing relies on color.