Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Data Analysis Chat Block for Solid

An analyst's chart message in a thread: every bar is a button that highlights it and quotes it above the composer, so your reply is anchored to that point and posts as a bubble with the quote.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Talk about a number, not just a picture of it, with this data analysis chat for Solid with Ark UI. A framed window of fixed height holds a thread with Brynja Falk, an analyst at Metricfold, whose chart message is a card in the log: a Toggle Group of three ranges (7, 30 or 90 days), a hand-built bar chart of orders whose every bar is a real button, and a caption with the peak and the total, derived from the typed series. Press a bar and it is highlighted and a quote chip ("Re: Tue 6 Oct, 412 orders") appears above the composer; your reply posts as a Bubble that carries the quote, and the analyst answers about that point. The composer's Shine Button is the only colored control. It's the starting point for a metrics review, a report thread or any chat anchored to data.

FAQ

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

Everything. The three series are typed arrays, the analyst's answers come from a short script keyed on the quoted point, and no query runs. To wire it for real, load the series for the chosen range where RANGES is read, send your reply with its quoted point id where post runs, and append the analyst's messages to the same list.

Does the chart have a text equivalent?

Yes, in two places. Every bar is a button whose name holds its figures ("Tue 6 Oct, 412 orders. Press to reply to this point."), so a screen reader walks the chart as a list of named buttons, and the caption states the peak and the total in words. Colour never carries the highlight: a pressed bar is solid foreground and announced as pressed.

How does the quote work?

A bar press stores the point, shows the chip and moves focus to the composer; pressing the same bar again, using the chip's close button or changing the range removes it. Sending posts your text with the quote inside the bubble and spends the chip, so one reply quotes one point.

How does the composer work?

Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log. The range switch and every bar are keyboard controls with visible focus, the status line says what is quoted or removed, and the quote chip is a plain line with a named close button.

How does it look on a phone?

The same single column: the chart card narrows to the log's width and its bars keep a tap target the full height of the plot, the quote chip truncates, and the window keeps its height with only the log scrolling.