Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Sustainability Tips Chat Block for Svelte

A coaching chat of tip cards with an example impact and a difficulty, an I will do this toggle, and a pledge band that adds the pledged impacts into a kilograms-a-year total with a challenge bar.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a habits coach with this sustainability tips chat for Svelte with Ark UI. A framed window of fixed height holds the thread between you and Corrine Alvarado of Lighterfoot, a home-habits programme, in week 3 of a 4-week challenge. Each tip card has a title, an example impact in kilograms of carbon dioxide a year, a difficulty shown as three dots and a word, and an "I'll do this" Toggle. A pledge band above the composer holds the tips you pledged as chips with Remove, the total "Pledged: 340 kg a year" added up from them and a Progress bar for the challenge. The quick answers (Another tip, A bigger one, Clothes) bring another tip card. The composer's Shine Button is the only colored control, and the frame is ruled by Guides. The figures are examples, not a footprint calculation.

FAQ

What stays in the page, and how do I make it real?

The six tips, their impacts and the replies are typed in this file, and the pledges live in the block's state. Each card says the figure is an example. Nothing is sent or scored. To wire it for real, load your tips into TIPS, save the pledged ids in pledge, and post the coach's messages to the same list.

How is the total worked out?

By adding the impact of each pledged tip, so pledging a tip raises it, removing one lowers it and the number is never typed twice. It starts at 340 kg a year with three tips pledged. The line under the composer announces the new count and total after each change.

How do I take a pledge back?

Press the toggle again on the card, or press the chip in the band: both change the same list. The band keeps its height when it is empty and says "Nothing pledged yet".

How is difficulty shown?

As three dots, filled up to the level, and always the word beside them (Easy, Medium or Hard), so it never relies on color. The dots are hidden from a screen reader and the word is read.

Is it usable with a keyboard and a screen reader?

Yes. The log is a focusable region announced as a log, every message starts with a hidden name and time, each tip is an article with a heading, the toggle carries the tip's name as hidden text and each chip reads as "Remove" and the tip.

How does it look on a phone?

The window keeps its height and only the log scrolls. The pledge band keeps a fixed height and its chips scroll sideways if there are many, and the quick answers wrap above the field, down to 320 px wide.

All 200 chat blocks