shadcn.io is not affiliated with official shadcn/ui
Network Graph Comments Block for Solid
Seven people on a drawn circle, joined by lines as thick as the replies they exchanged, where pressing a person lists who they replied to and who replied to them, and a switch hides links under three replies.
Installation
Overview
See who talks to whom, with this reply graph for Solid with Ark UI. A compact header names the product and holds a Switch that hides weak links (fewer than three replies in all). The first band is a figure: seven people sit on a circle at typed angles, each a real button over a hand-drawn SVG of lines, and a line is heavier the more replies the pair exchanged. Pressing a person outlines their lines and fills a facts cell beside the graph (under it on a phone) with their name, how many links they have, who they replied to ("Rowan 9, Idunn 4"), who replied to them and who is the most connected person among the links on show. Every line is also in a table for screen readers, and a live line speaks each choice. It is built from Switch, Guides and a hand-drawn SVG with HTML buttons over it, with a CSS entrance only. For community teams looking for the people holding a conversation together.
FAQ
How do I use my own people and replies?
Edit MEMBERS (an id, names, initials and an angle in degrees on the circle) and LINES, one line for each direction of a pair: who replied, to whom and how many times. The pair links, their weights, the line widths, the per-person lists and the most connected person are all worked out from those lines. Seven people fit the circle well; for more, use a table or a list instead.
What stays local, and how do I make it real?
Everything; the counts are typed for this demo and nothing is fetched. In a real app, count replies by author and parent author in your comments table, store the pair totals, and recompute the graph when the period changes. The switch and the choice of person are plain local state.
Is there a way to read the graph without seeing it?
Yes. The drawing is hidden from screen readers; the people are buttons whose names carry their links and reply counts, and a table inside the figure lists every pair on show with its total. Choosing a person speaks their summary, and the facts cell lists the same names in words.
What does the switch do?
It removes every pair with fewer than three replies in all: those lines disappear, the table loses those rows, and the per-person counts, the lists and the most connected person are recomputed from what remains. Switch it off to get them back.